Merge branch 'master' into resolves-fix

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,98 @@
+name: Bug report
+description: Create a report to help us improve
+title: "Component Name: Issue Title"
+labels: "Status: Needs Triage"
+body:
+  - type: markdown
+    attributes:
+      # yamllint disable rule:line-length
+      value: >
+        ### There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider *PrimeVue PRO Support* where support is provided within 4 business hours
+      # yamllint enable rule:line-length
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is.
+    validations:
+      required: true
+  - type: input
+    id: reproducer
+    attributes:
+      label: Reproducer
+      placeholder: https://codesandbox.io/s/primevue-3-issue-template-ip3vm
+      description: |
+        Please fork one of the issue template
+        [PrimeVue 3 Issue Template](https://codesandbox.io/s/primevue-3-issue-template-ip3vm)
+        [PrimeVue TypeScript Issue Template](https://codesandbox.io/s/primevue-3-typescript-issue-template-z1f6e2)
+        [PrimeVue 2 Issue Template](https://codesandbox.io/s/primevue-2-issue-template-dw7jd7)
+        and create a case demonstrating your bug report. Issues **without** a CodeSandbox have much less possibility to be reviewed.
+    validations:
+      required: true
+  - type: input
+    id: pr-version
+    attributes:
+      label: PrimeVue version
+      placeholder: x.x.x
+    validations:
+      required: true
+  - type: dropdown
+    id: vue-version
+    attributes:
+      label: Vue version
+      multiple: false
+      options:
+        - 3.x
+        - 2.x
+    validations:
+      required: true
+  - type: dropdown
+    id: language
+    attributes:
+      label: Language
+      multiple: false
+      options:
+        - TypeScript
+        - ES5
+        - ES6
+        - ALL
+    validations:
+      required: true
+  - type: dropdown
+    id: engine
+    attributes:
+      label: Build / Runtime
+      multiple: false
+      options:
+        - Vue CLI App
+        - TypeScript
+        - Nuxt
+        - Vite
+    validations:
+      required: true
+  - type: input
+    id: browsers
+    attributes:
+      label: Browser(s)
+      description: List specific browser(s) the problem occurs on or leave blank if ALL browsers
+      placeholder: >
+        e.g. Safari 15, iOS 15.4, Chrome 90
+  - type: textarea
+    id: reproduce-steps
+    attributes:
+      label: Steps to reproduce the behavior
+      description: A clear and concise description of how to make the issue happen.
+      placeholder: >
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: false
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,4 @@
+contact_links:
+    - name: Support
+      url: https://www.primefaces.org/primevue/support/
+      about: Professional support for the open source innovation.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,39 @@
+name: Feature request
+description: Suggest an idea for this project
+title: "Component Name: Issue Title"
+labels: ['Type: New Feature', 'Status: Discussion']
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the feature you would like to see added
+    validations:
+      required: true
+  - type: textarea
+    id: problem-related
+    attributes:
+      label: Is your feature request related to a problem?
+      description: A clear and concise description of what the problem is. Ex. I'm always frustrated when?
+    validations:
+      required: false
+  - type: textarea
+    id: solution
+    attributes:
+      label: Describe the solution you'd like
+      description: A clear and concise description of what you want to happen.
+    validations:
+      required: false
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Describe alternatives you have considered
+      description: A clear and concise description of any alternative solutions or features you've considered.
+    validations:
+      required: false
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Add any other context or screenshots about the feature request here.
+    validations:
+      required: false

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,5 @@
+###Defect Fixes
+When submitting a PR, please also create an issue documenting the error.
+
+###Feature Requests
+Due to company policy, we are unable to accept feature request PRs with significant changes as such cases has to be implemented by our team following our own processes.

.github/workflows/issue-inactive-checker.yml

@@ -0,0 +1,22 @@
+name: Issue Inactive Checker
+
+on:
+  schedule:
+    - cron: "0 13 * * 1" # Every Monday at 1PM UTC (9AM EST)
+
+permissions:
+  contents: read
+
+jobs:
+  issue-close-require:
+    permissions:
+      issues: write
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: cannot replicate
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: "close-issues"
+          labels: "Resolution: Cannot Replicate"
+          inactive-day: 20

.github/workflows/issue-labeled.yml

@@ -0,0 +1,25 @@
+name: Issue Labeled
+
+on:
+  issues:
+    types: [labeled]
+
+permissions:
+  contents: read
+
+jobs:
+  issue-labeled:
+    permissions:
+      issues: write  # for actions-cool/issues-helper to update issues
+      pull-requests: write  # for actions-cool/issues-helper to update PRs
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cannot Replicate
+        if: "${{ github.event.label.name == 'Resolution: Cannot Replicate'}}"
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'create-comment'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days.

.github/workflows/nightly.yml

@@ -0,0 +1,32 @@
+name: Daily Build
+
+on:
+  schedule:
+    - cron: '0 6 * * *'
+
+permissions:
+  contents: read
+
+jobs:
+  nightly:
+    if: github.repository == 'primefaces/primevue' && github.ref == 'refs/heads/master'
+    runs-on: ubuntu-latest
+    name: Node ${{ matrix.node-version }}
+
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
+
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+
+    - name: Build
+      run: |
+        npm install
+        npm run build:lib

.github/workflows/node.js.yml

@@ -0,0 +1,49 @@
+name: NodeJS CI
+
+on:
+    push:
+        branches: [master]
+
+permissions:
+    contents: read
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+
+        strategy:
+            matrix:
+                node-version: [16.x, 18.x]
+
+        steps:
+            - uses: actions/checkout@v2
+
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v2
+              with:
+                  node-version: ${{ matrix.node-version }}
+                  cache: 'npm'
+
+            - name: Build
+              run: |
+                  npm install
+
+            - name: Lint Check
+              if: ${{ success() }}
+              run: |
+                  npm run format:check
+
+            - name: Code Format
+              if: ${{ success() }}
+              run: |
+                  npm run format:check
+
+            - name: Security Check
+              if: ${{ success() }}
+              run: |
+                  npm run security:check
+
+            - name: Test
+              if: ${{ success() }}
+              run: |
+                  npm run test:unit

.github/workflows/pr-checker.yml

@@ -0,0 +1,71 @@
+name: Pr Checker
+
+on:
+  pull_request:
+    types: [edited, synchronize, opened, reopened]
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  pr-open-check:
+    permissions:
+      issues: write
+      pull-requests: write
+    runs-on: ubuntu-latest
+    env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    steps:
+      - name: Verify Linked Issue
+        uses: hattan/verify-linked-issue-action@v1.1.5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          message: 'Thanks a lot for your contribution! But, PR does not seem to be linked to any issues. Please [manually link to an issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#manually-linking-a-pull-request-or-branch-to-an-issue-using-the-issue-sidebar) or mention it in the description using #<issue_id>.'
+
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'npm'
+
+      - name: Install packages
+        run: |
+          npm install
+
+      - name: Code Format
+        id: codeFormat
+        run: |
+          npm run format:check
+
+      - name: Unit Test
+        id: unitTest
+        run: |
+          npm run test:unit
+
+      - name: Add Code Format Fail Comment
+        if: always() && steps.codeFormat.outcome == 'failure'
+        uses: thollander/actions-comment-pull-request@v1
+        with:
+          message: |
+            Thanks a lot for your contribution! But, PR does not seem to fit our code format standards. Please run the 'npm run format' command and commit the changes.
+
+      - name: Add Unit Test Fail Comment
+        if: always() && steps.unitTest.outcome == 'failure'
+        uses: thollander/actions-comment-pull-request@v1
+        with:
+          message: |
+            Thanks a lot for your contribution! But, Unit tests failed. You can check the unit tests with the command 'npm run test:unit' and commit the changes.
+
+      - name: Add Label
+        if: ${{ failure() }}
+        uses: actions-ecosystem/action-add-labels@v1
+        with:
+          labels: 'Resolution: Needs Revision'
+
+      - name: Remove Label
+        uses: actions-ecosystem/action-remove-labels@v1
+        if: ${{ success() }}
+        with:
+          labels: 'Resolution: Needs Revision'

.prettierignore

@@ -2,8 +2,10 @@
 build
 coverage
 dist
-out
 public
 styles
 node_modules
 .vscode
+dist
+.nuxt
+.output

api-generator/build-api.js

@@ -17,6 +17,7 @@ const fileModules = {},
     veturAttributes = {};
 
 const files = fs.readdirSync(componentPath);
+
 files.forEach((file) => {
     const { name } = path.parse(file);
 
@@ -123,11 +124,13 @@ const createWebTypes = (component) => {
 
 const createVeturTags = (component) => {
     const attributes = [];
+
     if (component.props) {
         component.props.forEach((comp) => {
             attributes.push(comp.name);
         });
     }
+
     if (attributes.length > 0) {
         veturTags[component.name] = {
             description: component.description,
@@ -154,10 +157,13 @@ Object.keys(fileModules).forEach((p) => {
 });
 
 const webTypesJson = JSON.stringify(webTypes, null, 2);
+
 fs.writeFileSync(path.resolve(distDir, 'web-types.json'), webTypesJson);
 
 const veturTagsJson = JSON.stringify(veturTags, null, 2);
+
 fs.writeFileSync(path.resolve(distDir, 'vetur-tags.json'), veturTagsJson);
 
 const veturAttributesJson = JSON.stringify(veturAttributes, null, 2);
+
 fs.writeFileSync(path.resolve(distDir, 'vetur-attributes.json'), veturAttributesJson);

assets/styles/landing/_designer.scss

@@ -87,13 +87,6 @@
             }
         }
 
-        .p-listbox {
-            .p-listbox-list .p-listbox-item.p-highlight {
-                background-color: transparent;
-                box-shadow: inset 0 0 0 0.15rem var(--dd-primary);
-            }
-        }
-
         .p-inputtext, .p-button, .p-listbox-item, .p-slider {
             transition: all .5s;
         }

components/badgedirective/BadgeDirective.js

@@ -1,8 +1,7 @@
-import { DomHandler } from 'primevue/utils';
-import { UniqueComponentId } from 'primevue/utils';
+import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 const BadgeDirective = {
-    beforeMount(el, options) {
+    mounted(el, options) {
         const id = UniqueComponentId() + '_badge';
 
         el.$_pbadgeId = id;

components/carousel/Carousel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :id="id" :class="['p-carousel p-component', { 'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical() }]" role="region">
+    <div :class="['p-carousel p-component', { 'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical() }]" role="region">
         <div v-if="$slots.header" class="p-carousel-header">
             <slot name="header"></slot>
         </div>
@@ -141,7 +141,6 @@ export default {
     isRemainingItemsAdded: false,
     data() {
         return {
-            id: UniqueComponentId(),
             remainingItems: 0,
             d_numVisible: this.numVisible,
             d_numScroll: this.numScroll,
@@ -177,6 +176,7 @@ export default {
     mounted() {
         let stateChanged = false;
 
+        this.$el.setAttribute(this.attributeSelector, '');
         this.createStyle();
         this.calculatePosition();
 
@@ -563,7 +563,7 @@ export default {
             }
 
             let innerHTML = `
-            #${this.id} .p-carousel-item {
+                .p-carousel[${this.attributeSelector}] .p-carousel-item {
                     flex: 1 0 ${100 / this.d_numVisible}%
                 }
             `;
@@ -590,7 +590,7 @@ export default {
 
                     innerHTML += `
                         @media screen and (max-width: ${res.breakpoint}) {
-                        #${this.id} .p-carousel-item {
+                            .p-carousel[${this.attributeSelector}] .p-carousel-item {
                                 flex: 1 0 ${100 / res.numVisible}%
                             }
                         }
@@ -649,6 +649,9 @@ export default {
         },
         ariaNextButtonLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.nextPageLabel : undefined;
+        },
+        attributeSelector() {
+            return UniqueComponentId();
         }
     },
     directives: {

components/panelmenu/PanelMenu.spec.js

@@ -72,8 +72,9 @@ describe('PanelMenu', () => {
         await wrapper.vm.onHeaderClick({}, wrapper.vm.model[0]);
 
         expect(wrapper.find('.p-panelmenu-header-action > .p-submenu-icon').classes()).toContain('pi-chevron-down');
+
         setTimeout(() => {
-            expect(wrapper.findAll('.p-toggleable-content')[0].attributes().style).toBe(undefined);
+            expect(wrapper.findAll('.p-toggleable-content')[0].attributes().style).toBe('');
         }, 25);
     });
 

components/utils/Utils.js

@@ -1,8 +1,8 @@
 import ConnectedOverlayScrollHandler from './ConnectedOverlayScrollHandler';
 import DomHandler from './DomHandler';
-import ObjectUtils from './ObjectUtils';
-import ZIndexUtils from './ZIndexUtils';
-import UniqueComponentId from './UniqueComponentId';
 import EventBus from './EventBus';
+import ObjectUtils from './ObjectUtils';
+import UniqueComponentId from './UniqueComponentId';
+import ZIndexUtils from './ZIndexUtils';
 
 export { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, ZIndexUtils, UniqueComponentId, EventBus };

layouts/AppCodeHighlight.js

@@ -1,7 +1,7 @@
-import Prism from 'prismjs';
+import { DomHandler } from 'primevue/utils';
 
 const CodeHighlight = {
-    beforeMount(el, binding) {
+    mounted(el, binding) {
         const modifiers = binding.modifiers;
         const value = binding.value;
 
@@ -9,7 +9,7 @@ const CodeHighlight = {
         else if (modifiers.css || value === 'css') el.className = 'language-css';
         else el.className = 'language-markup';
 
-        Prism.highlightElement(el.children[0]);
+        DomHandler.isClient() && window.Prism.highlightElement(el.children[0]);
     }
 };
 

layouts/default.vue

@@ -32,15 +32,6 @@ export default {
             sidebarActive: false
         };
     },
-    mounted() {
-        if (this.isOutdatedIE()) {
-            this.$toast.add({
-                severity: 'warn',
-                summary: 'Limited Functionality',
-                detail: 'Although PrimeVue supports IE11, ThemeSwitcher in this application cannot be not fully supported by your browser. Please use a modern browser for the best experience of the showcase.'
-            });
-        }
-    },
     watch: {
         $route: {
             immediate: true,
@@ -49,12 +40,25 @@ export default {
                     return;
                 }
 
+                window['gtag']('config', 'UA-93461466-1', {
+                    page_path: '/primevue' + to.path
+                });
+
                 this.sidebarActive = false;
                 DomHandler.removeClass(document.body, 'blocked-scroll');
                 this.$toast.removeAllGroups();
             }
         }
     },
+    mounted() {
+        if (this.isOutdatedIE()) {
+            this.$toast.add({
+                severity: 'warn',
+                summary: 'Limited Functionality',
+                detail: 'Although PrimeVue supports IE11, ThemeSwitcher in this application cannot be not fully supported by your browser. Please use a modern browser for the best experience of the showcase.'
+            });
+        }
+    },
     methods: {
         onMenuButtonClick() {
             if (this.sidebarActive) {
@@ -90,6 +94,7 @@ export default {
         },
         isOutdatedIE() {
             let ua = window.navigator.userAgent;
+
             if (ua.indexOf('MSIE ') > 0 || ua.indexOf('Trident/') > 0) {
                 return true;
             }

nuxt.config.js

@@ -1,6 +1,5 @@
 import vueJsx from '@vitejs/plugin-vue-jsx';
 const path = require('path');
-
 const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/';
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
@@ -56,11 +55,15 @@ export default defineNuxtConfig({
 
                         gtag('config', 'UA-93461466-1');
                     `
+                },
+                {
+                    src: baseUrl + 'scripts/prism.js',
+                    'data-manual': true
                 }
             ]
         }
     },
-    css: ['@/assets/styles/primevue.css', '/node_modules/primeflex/primeflex.css', '/node_modules/primeicons/primeicons.css', '/node_modules/prismjs/themes/prism-coy.css', '@/assets/styles/flags.css'],
+    css: ['@/assets/styles/primevue.css', '/node_modules/primeflex/primeflex.css', '/node_modules/primeicons/primeicons.css', '@/assets/styles/flags.css'],
     vite: {
         plugins: [vueJsx()],
         resolve: {

package.json

@@ -13,8 +13,9 @@
         "generate": "nuxt generate",
         "preview": "nuxt preview",
         "postinstall": "nuxt prepare",
+        "build:lib": "npm run build:check && npm run build:package",
         "build:package": "NODE_ENV=production rollup -c && node build-meta && node api-generator/build-api && gulp build-styles",
-    "build:check": "npm run lint && npm run format:check && npm run security:check && npm run test:unit",
+        "build:check": "npm run format:check && npm run security:check && npm run test:unit",
         "security:check": "npm audit --production --audit-level high",
         "format": "prettier --write \"**/*.{js,vue,d.ts}\"",
         "format:check": "prettier --check \"**/*.{js,vue,d.ts}\"",
@@ -42,7 +43,6 @@
         "nuxt": "^3.0.0",
         "primeflex": "^3.3.0",
         "primeicons": "^6.0.1",
-    "prismjs": "^1.15.0",
         "quill": "^1.3.7",
         "rollup-plugin-postcss": "^4.0.0",
         "rollup-plugin-terser": "^7.0.2",

pages/accordion/AccordionDoc.vue

@@ -1,5 +1,4 @@
 <template>
-    <ClientOnly>
     <AppDoc name="AccordionDemo" :sources="sources" github="accordion/AccordionDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
@@ -163,13 +162,13 @@ export default {
 
         <h5>Dynamic Tabs</h5>
         <p>Tabs can be generated dynamically using the standard <i>v-for</i> directive.</p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;Accordion&gt;
 	&lt;AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title"&gt;
-		&lt;p&gt;{{tab.content}}&lt;/p&gt;
+		&lt;p&gt;&#123;&#123;tab.content&#125;&#125;&lt;/p&gt;
 	&lt;/AccordionTab&gt;
 &lt;/Accordion&gt;
-</template>
+
 </code></pre>
 
         <pre v-code.script><code>
@@ -406,8 +405,8 @@ export default {
         <h5>Accessibility</h5>
         <h6>Screen Reader</h6>
         <p>
-                Accordion header elements have a <i>button</i> role and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the
-                value of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>headerActionProps</i> property.
+            Accordion header elements have a <i>button</i> role and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the value of
+            the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>headerActionProps</i> property.
         </p>
         <p>The content uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.</p>
 
@@ -473,8 +472,7 @@ export default {
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/autocomplete/AutoCompleteDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']" github="autocomplete/AutoCompleteDemo.vue">
+    <AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']" github="autocomplete/AutoCompleteDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import AutoComplete from 'primevue/autocomplete';
@@ -46,8 +45,8 @@ export default {
 
         <h5>Dropdown</h5>
         <p>
-                Enabling <i>dropdown</i> property displays a button next to the input field where click behavior of the button is defined using dropdownMode property that takes "blank" or "current" as possible values. "blank" is the default mode to
-                send a query with an empty string whereas "current" setting sends a query with the current value of the input.
+            Enabling <i>dropdown</i> property displays a button next to the input field where click behavior of the button is defined using dropdownMode property that takes "blank" or "current" as possible values. "blank" is the default mode to send
+            a query with an empty string whereas "current" setting sends a query with the current value of the input.
         </p>
         <pre v-code><code>
 &lt;AutoComplete v-model="brand" :dropdown="true" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" /&gt;
@@ -63,8 +62,8 @@ export default {
 
         <h5>Objects</h5>
         <p>
-                AutoComplete can also work with objects using the <i>optionLabel</i> property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with
-                a Country object that has name and code fields such as &#123;name:"United States",code:"USA"&#125;.
+            AutoComplete can also work with objects using the <i>optionLabel</i> property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a
+            Country object that has name and code fields such as &#123;name:"United States",code:"USA"&#125;.
         </p>
         <pre v-code><code>
 &lt;AutoComplete optionLabel="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" /&gt;
@@ -110,10 +109,10 @@ export default {
 }
 </code></pre>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)"
     optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"&gt;&lt;/AutoComplete&gt;
-</template>
+
 </code></pre>
 
         <h5>Force Selection</h5>
@@ -131,14 +130,14 @@ export default {
             Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection. In addition <i>optiongroup</i>,
             <i>chip</i>, <i>header</i> and <i>footer</i> slots are provided for further customization
         </p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
     &lt;template #item="slotProps"&gt;
 		&lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt;
-        &lt;div&gt;{{slotProps.item}}&lt;/div&gt;
+        &lt;div&gt;&#123;&#123;slotProps.item&#125;&#125;&lt;/div&gt;
 	&lt;/template&gt;
 &lt;/AutoComplete&gt;
-</template>
+
 </code></pre>
 
         <h5>Properties</h5>
@@ -618,13 +617,13 @@ export default {
         <h6>Screen Reader</h6>
         <p>
             Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role in addition to
-                <i>aria-autocomplete</i>, <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct
-                screen reader which option to read during keyboard navigation within the popup list.
+            <i>aria-autocomplete</i>, <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen
+            reader which option to read during keyboard navigation within the popup list.
         </p>
         <p>In multiple mode, chip list uses <i>listbox</i> role with <i>aria-orientation</i> set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.</p>
         <p>
-                The popup list has an id that refers to the <i>aria-controls</i> attribute of the input element and uses <i>listbox</i> as the role. Each list item has <i>option</i> role and an id to match the <i>aria-activedescendant</i> of the
-                input element.
+            The popup list has an id that refers to the <i>aria-controls</i> attribute of the input element and uses <i>listbox</i> as the role. Each list item has <i>option</i> role and an id to match the <i>aria-activedescendant</i> of the input
+            element.
         </p>
 
         <pre v-code><code>
@@ -780,8 +779,7 @@ export default {
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/avatar/AvatarDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue">
+    <AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Avatar from 'primevue/avatar';
@@ -222,8 +221,7 @@ import AvatarGroup from 'primevue/avatargroup';
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/badge/BadgeDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="BadgeDemo" :sources="sources" github="badge/BadgeDemo.vue">
+    <AppDoc name="BadgeDemo" :sources="sources" github="badge/BadgeDemo.vue">
         <h5>Getting Started</h5>
         <p>Badge can either be used as a standalone component or as a directive.</p>
 
@@ -201,8 +200,7 @@ app.directive('badge', BadgeDirective);
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/blockui/BlockUIDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue">
+    <AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import BlockUI from 'primevue/blockui';
@@ -16,8 +15,8 @@ import BlockUI from 'primevue/blockui';
 
         <h5>Getting Started</h5>
         <p>
-                BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked with a mask when blockedPanel is enabled and gets unblock when the bound variable
-                is set to false.
+            BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked with a mask when blockedPanel is enabled and gets unblock when the bound variable is
+            set to false.
         </p>
         <pre v-code><code>
 &lt;BlockUI :blocked="blockedPanel"&gt;
@@ -147,8 +146,7 @@ export default {
         <h5>Accessibility</h5>
         <h6>Screen Reader</h6>
         <p>
-                BlockUI manages <i>aria-busy</i> state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like <i>role</i> and <i>aria-live</i> can be used to define live
-                regions.
+            BlockUI manages <i>aria-busy</i> state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like <i>role</i> and <i>aria-live</i> can be used to define live regions.
         </p>
 
         <h5>Keyboard Support</h5>
@@ -156,8 +154,7 @@ export default {
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/breadcrumb/BreadcrumbDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue">
+    <AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Breadcrumb from 'primevue/breadcrumb';
@@ -44,25 +43,25 @@ export default {
 
         <h5>Templating</h5>
         <p>Breadcrumb offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;Breadcrumb :home="home" :model="items"&gt;
     &lt;template #item="{item}"&gt;
-        &lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
+        &lt;a :href="item.url"&gt;&#123;&#123;item.label&#125;&#125;&lt;/a&gt;
     &lt;/template&gt;
 &lt;/Breadcrumb&gt;
-</template>
+
 </code></pre>
 
         <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;Breadcrumb :home="home" :model="items"&gt;
     &lt;template #item="{item}"&gt;
         &lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
-            &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
+            &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;&#123;&#123;route.fullPath&#125;&#125;&lt;/a&gt;
         &lt;/router-link&gt;
     &lt;/template&gt;
 &lt;/Breadcrumb&gt;
-</template>
+
 </code></pre>
 
         <h5>Properties</h5>
@@ -188,8 +187,7 @@ export default {
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/button/ButtonDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
+    <AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Button from 'primevue/button';
@@ -116,8 +115,8 @@ import Button from 'primevue/button';
 
         <h5>Sizes</h5>
         <p>
-                2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>. Note that these classes available to change the size of a particular button, for
-                global scaling see the <router-link to="/theming">theming</router-link> page.
+            2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>. Note that these classes available to change the size of a particular button, for global
+            scaling see the <router-link to="/theming">theming</router-link> page.
         </p>
         <pre v-code><code>
 &lt;Button label="Small" icon="pi pi-check" class="p-button-sm"  /&gt;
@@ -294,8 +293,7 @@ import Button from 'primevue/button';
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/calendar/CalendarDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="CalendarDemo" :sources="sources" github="calendar/CalendarDemo.vue">
+    <AppDoc name="CalendarDemo" :sources="sources" github="calendar/CalendarDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Calendar from 'primevue/calendar';
@@ -42,8 +41,8 @@ export default {
 
         <h5>Selection Mode</h5>
         <p>
-                By default calendar allows selecting one date only whereas multiple dates can be selected by setting <i>selectionMode</i> to multiple. In this case calendar updates the value with an array of dates where optionally number of
-                selectable dates can be restricted with maxDateCount property. Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value is the end date.
+            By default calendar allows selecting one date only whereas multiple dates can be selected by setting <i>selectionMode</i> to multiple. In this case calendar updates the value with an array of dates where optionally number of selectable
+            dates can be restricted with maxDateCount property. Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value is the end date.
         </p>
 
         <pre v-code><code>
@@ -52,9 +51,7 @@ export default {
 </code></pre>
 
         <h5>DateFormat</h5>
-            <p>
-                Default date format is mm/dd/yy, to customize this use <i>dateFormat</i> property or define it at <router-link to="/locale">PrimeVue Locale</router-link> globally. Note that standalone property overrides the value in locale settings.
-            </p>
+        <p>Default date format is mm/dd/yy, to customize this use <i>dateFormat</i> property or define it at <router-link to="/locale">PrimeVue Locale</router-link> globally. Note that standalone property overrides the value in locale settings.</p>
 
         <pre v-code><code>
 &lt;Calendar v-model="value" dateFormat="dd.mm.yy" /&gt;
@@ -137,14 +134,14 @@ export default {
             object to represent a Date with "day", "month" and "year" properties. Example below changes the background color of dates between 10th and 15th of each month.
         </p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;Calendar v-model="value"&gt;
     &lt;template #date="slotProps"&gt;
-        &lt;strong v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/strong&gt;
+        &lt;strong v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;&#123;&#123;slotProps.date.day&#125;&#125;&lt;/strong&gt;
         &lt;template v-else&gt;&#123;&#123;slotProps.date.day&#125;&#125;&lt;/template&gt;
     &lt;/template&gt;
 &lt;/Calendar&gt;
-</template>
+
 </code></pre>
 
         <pre v-code.css><code>
@@ -714,8 +711,8 @@ export default {
         </p>
         <p>
             The optional calendar button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the
-                <i>chooseDate</i> key of the aria property from the <router-link to="/locale">locale</router-link> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and
-                appended to the label to be able to notify users about the current value.
+            <i>chooseDate</i> key of the aria property from the <router-link to="/locale">locale</router-link> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and appended
+            to the label to be able to notify users about the current value.
         </p>
 
         <p>
@@ -902,8 +899,7 @@ export default {
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/card/CardDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue">
+    <AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Card from 'primevue/card';
@@ -109,8 +108,8 @@ import Card from 'primevue/card';
 
         <h6>Screen Reader</h6>
         <p>
-                A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you
-                require to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property.
+            A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you require
+            to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property.
         </p>
 
         <pre v-code><code>
@@ -125,8 +124,7 @@ import Card from 'primevue/card';
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/carousel/CarouselDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="carousel/CarouselDemo.vue">
+    <AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="carousel/CarouselDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Carousel from 'primevue/carousel';
@@ -36,7 +35,7 @@ import Carousel from 'primevue/carousel';
 
         <h5>Responsive</h5>
         <p>For responsive design, <i>numVisible</i> and <i>numScroll</i> can be defined using the <i>responsiveOptions</i> property that should be an array of objects whose breakpoint defines the max-width to apply the settings.</p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
 	&lt;template #header&gt;
 		&lt;h2&gt;Basic&lt;/h2&gt;
@@ -48,8 +47,8 @@ import Carousel from 'primevue/carousel';
                     &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
                 &lt;/div&gt;
                 &lt;div&gt;
-                    &lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt;
-                    &lt;div class="car-subtitle"&gt;{{slotProps.data.year}} | {{slotProps.data.color}}&lt;/div&gt;
+                    &lt;div class="car-title"&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/div&gt;
+                    &lt;div class="car-subtitle"&gt;&#123;&#123;slotProps.data.year | slotProps.data.color&#125;&#125;&lt;/div&gt;
 
                     &lt;div class="car-buttons"&gt;
                         &lt;Button icon="pi pi-search" class="p-button-secondary" /&gt;
@@ -61,7 +60,7 @@ import Carousel from 'primevue/carousel';
         &lt;/div&gt;
 	&lt;/template&gt;
 &lt;/Carousel&gt;
-</template>
+
 </code></pre>
         <pre v-code.script><code>
 data() {
@@ -118,9 +117,7 @@ data() {
 </code></pre>
 
         <h5>AutoPlay and Circular</h5>
-            <p>
-                When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.
-            </p>
+        <p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.</p>
         <pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000"&gt;
 	&lt;template #header&gt;
@@ -329,13 +326,13 @@ data() {
         </p>
 
         <p>
-                A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <router-link to="/locale">locale</router-link> API. Similarly <i>aria.slide</i> is used as the
-                <i>aria-roledescription</i> of the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
+            A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <router-link to="/locale">locale</router-link> API. Similarly <i>aria.slide</i> is used as the <i>aria-roledescription</i> of
+            the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
         </p>
 
         <p>
-                Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the <router-link to="/locale">locale</router-link> API by
-                default respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
+            Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the <router-link to="/locale">locale</router-link> API by default
+            respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
         </p>
 
         <p>Quick navigation elements are button elements with an <i>aria-label</i> attribute referring to the <i>aria.pageLabel</i> of the <router-link to="/locale">locale</router-link> API. Current page is marked with <i>aria-current</i>.</p>
@@ -430,8 +427,7 @@ data() {
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/carousel/index.vue

@@ -23,7 +23,7 @@
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
+                                    <img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
                                     <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@@ -50,7 +50,7 @@
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
+                                    <img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
                                     <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@@ -77,7 +77,7 @@
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
+                                    <img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
                                     <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@@ -124,7 +124,8 @@ export default {
                     numVisible: 1,
                     numScroll: 1
                 }
-            ]
+            ],
+            baseUrl: '/'
         };
     },
     productService: null,
@@ -133,6 +134,8 @@ export default {
     },
     mounted() {
         this.productService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
+
+        this.baseUrl = process.dev ? '/' : '/primevue-nuxt/';
     },
     components: {
         CarouselDoc: CarouselDoc

pages/cascadeselect/CascadeSelectDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="CascadeSelectDemo" :sources="sources" github="cascadeselect/CascadeSelectDemo.vue">
+    <AppDoc name="CascadeSelectDemo" :sources="sources" github="cascadeselect/CascadeSelectDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import CascadeSelect from 'primevue/cascadeselect';
@@ -114,7 +113,7 @@ data() &#123;
         <h5>Templating</h5>
         <p>Content of an item can be customized with the <i>option</i> template.</p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
         :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem"&gt;
     &lt;template #option="slotProps"&gt;
@@ -122,11 +121,11 @@ data() &#123;
             &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt;
             &lt;i class="pi pi-compass mr-2" v-if="slotProps.option.cities"&gt;&lt;/i&gt;
             &lt;i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"&gt;&lt;/i&gt;
-            &lt;span&gt;{{slotProps.option.cname || slotProps.option.name}}&lt;/span&gt;
+            &lt;span&gt;&#123;&#123;slotProps.option.cname || slotProps.option.name&#125;&#125;&lt;/span&gt;
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/CascadeSelect&gt;
-</template>
+
 </code></pre>
 
         <h5>Properties</h5>
@@ -489,13 +488,12 @@ data() &#123;
         <h5>Accessibility</h5>
         <h6>Screen Reader</h6>
         <p>
-                Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The cascadeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and
-                <i>aria-expanded</i> attributes. The relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
+            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The cascadeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes.
+            The relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
         </p>
         <p>
-                The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>tree</i> as the role. Each list item has a <i>treeitem</i> role along with <i>aria-label</i>,
-                <i>aria-selected</i> and <i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and
-                added to each treeitem.
+            The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>tree</i> as the role. Each list item has a <i>treeitem</i> role along with <i>aria-label</i>, <i>aria-selected</i> and
+            <i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each treeitem.
         </p>
 
         <pre v-code><code>
@@ -612,8 +610,7 @@ data() &#123;
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/chart/BarChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-    <ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/BarChartDemo.vue" /></ClientOnly>
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/BarChartDemo.vue" />
 </template>
 
 <script>

pages/chart/ComboChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-    <ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/ComboChartDemo.vue" /></ClientOnly>
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/ComboChartDemo.vue" />
 </template>
 
 <script>

pages/chart/DoughnutChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-    <ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/DoughnutChartDemo.vue" /></ClientOnly>
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/DoughnutChartDemo.vue" />
 </template>
 
 <script>

pages/chart/LineChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-    <ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/LineChartDemo.vue" /></ClientOnly>
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/LineChartDemo.vue" />
 </template>
 
 <script>

pages/chart/PieChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-    <ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PieChartDemo.vue" /></ClientOnly>
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PieChartDemo.vue" />
 </template>
 
 <script>

pages/chart/PolarAreaChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-    <ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PolarAreaChartDemo.vue" /></ClientOnly>
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PolarAreaChartDemo.vue" />
 </template>
 
 <script>

pages/chart/RadarChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-    <ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/RadarChartDemo.vue" /></ClientOnly>
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/RadarChartDemo.vue" />
 </template>
 
 <script>

pages/checkbox/CheckboxDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue">
+    <AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Checkbox from 'primevue/checkbox';
@@ -257,8 +256,7 @@ export default {
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/chip/ChipDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue">
+    <AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Chip from 'primevue/chip';
@@ -172,8 +171,7 @@ import Chip from 'primevue/chip';
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/chips/ChipsDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue">
+    <AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Chips from 'primevue/chips';
@@ -23,16 +22,16 @@ import Chips from 'primevue/chips';
 
         <h5>Custom Content</h5>
         <p>A chip is customized using the <i>chip</i> template where the chip value is passed to the slotProps with the value property.</p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;Chips v-model="value"&gt;
 	&lt;template #chip="slotProps"&gt;
 		&lt;div&gt;
-			&lt;span&gt;{{slotProps.value}} - (active) &lt;/span&gt;
+			&lt;span&gt;&#123;&#123;slotProps.value&#125;&#125; - (active) &lt;/span&gt;
 			&lt;i class="pi pi-user-plus" style="font-size: 14px"&gt;&lt;/i&gt;
 		&lt;/div&gt;
 	&lt;/template&gt;
 &lt;/Chips&gt;
-</template>
+
 </code></pre>
 
         <h5>Properties</h5>
@@ -212,8 +211,8 @@ import Chips from 'primevue/chips';
         <h5>Accessibility</h5>
         <h6>Screen Reader</h6>
         <p>
-                Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Chip list uses <i>listbox</i> role with
-                <i>aria-orientation</i> set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
+            Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Chip list uses <i>listbox</i> role with <i>aria-orientation</i> set to
+            horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
         </p>
 
         <pre v-code><code>
@@ -285,8 +284,7 @@ import Chips from 'primevue/chips';
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/colorpicker/ColorPickerDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles" github="colorpicker/ColorPickerDemo.vue">
+    <AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles" github="colorpicker/ColorPickerDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import ColorPicker from 'primevue/colorpicker';
@@ -207,8 +206,8 @@ export default {
         <h5>Accessibility</h5>
         <h6>Screen Reader</h6>
         <p>
-                Specification does not cover a color picker <a href="https://github.com/w3c/aria/issues/930">yet</a> and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen
-                readers. In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.
+            Specification does not cover a color picker <a href="https://github.com/w3c/aria/issues/930">yet</a> and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen readers.
+            In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.
         </p>
 
         <h6>Closed State Keyboard Support of Popup ColorPicker</h6>
@@ -302,8 +301,7 @@ export default {
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/confirmdialog/ConfirmDialogDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="ConfirmDialogDemo" :sources="sources" github="confirmdialog/ConfirmDialogDemo.vue">
+    <AppDoc name="ConfirmDialogDemo" :sources="sources" github="confirmdialog/ConfirmDialogDemo.vue">
         <h5>ConfirmationService</h5>
         <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
         <pre v-code.script><code>
@@ -27,8 +26,8 @@ import ConfirmDialog from 'primevue/confirmdialog';
 
         <h5>Getting Started</h5>
         <p>
-                ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. Suggested location of the Dialog is the main application component where it can be shared
-                by any component within the application.
+            ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. Suggested location of the Dialog is the main application component where it can be shared by
+            any component within the application.
         </p>
         <pre v-code><code>
 &lt;ConfirmDialog&gt;&lt;/ConfirmDialog&gt;
@@ -110,16 +109,16 @@ export default {
 
         <h5>Templating</h5>
         <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;ConfirmPopup group="demo">
     &lt;template #message="slotProps"&gt;
         &lt;div class="flex p-4"&gt;
             &lt;i :class="slotProps.message.icon" style="font-size: 1.5rem"&gt;&lt;/i&gt;
-            &lt;p class="pl-2"&gt;{{slotProps.message.message}}&lt;/p&gt;
+            &lt;p class="pl-2"&gt;&#123;&#123;slotProps.message.message&#125;&#125;&lt;/p&gt;
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/ConfirmPopup&gt;
-</template>
+
 </code></pre>
 
         <h5>Responsive</h5>
@@ -358,8 +357,8 @@ export default {
         </p>
 
         <p>
-                When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between
-                the trigger and the dialog is defined.
+            When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
+            trigger and the dialog is defined.
         </p>
 
         <pre v-code><code>
@@ -450,8 +449,7 @@ setup() {
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/confirmpopup/ConfirmPopupDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="ConfirmPopupDemo" :sources="sources" github="confirmpopup/ConfirmPopupDemo.vue">
+    <AppDoc name="ConfirmPopupDemo" :sources="sources" github="confirmpopup/ConfirmPopupDemo.vue">
         <h5>ConfirmationService</h5>
         <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
         <pre v-code.script><code>
@@ -111,17 +110,16 @@ export default {
 
         <h5>Templating</h5>
         <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;ConfirmPopup group="demo">
     &lt;template #message="slotProps"&gt;
         &lt;div class="flex p-4"&gt;
             &lt;i :class="slotProps.message.icon" style="font-size: 1.5rem"&gt;&lt;/i&gt;
-            &lt;p class="pl-2"&gt;{{slotProps.message.message}}&lt;/p&gt;
+            &lt;p class="pl-2"&gt;&#123;&#123;slotProps.message.message&#125;&#125;&lt;/p&gt;
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/ConfirmPopup&gt;
 
-</template>
 </code></pre>
 
         <h5>Confirmation Options</h5>
@@ -339,8 +337,8 @@ export default {
             <i>aria-modal</i> is added since focus is kept within the popup.
         </p>
         <p>
-                When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between
-                the trigger and the dialog is defined.
+            When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
+            trigger and the dialog is defined.
         </p>
 
         <pre v-code><code>
@@ -432,8 +430,7 @@ setup() {
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/contextmenu/ContextMenuDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="ContextMenuDemo" :sources="sources" github="contextmenu/ContextMenuDemo.vue">
+    <AppDoc name="ContextMenuDemo" :sources="sources" github="contextmenu/ContextMenuDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import ContextMenu from 'primevue/contextmenu';
@@ -194,25 +193,25 @@ export default {
 
         <h5>Templating</h5>
         <p>ContextMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;ContextMenu :model="items"&gt;
 	&lt;template #item="{item}"&gt;
-			&lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
+			&lt;a :href="item.url"&gt;&#123;&#123;item.label&#125;&#125;&lt;/a&gt;
 	&lt;/template&gt;
 &lt;/ContextMenu&gt;
-</template>
+
 </code></pre>
 
         <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;ContextMenu :model="items"&gt;
 	&lt;template #item="{item}"&gt;
 			&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
-					&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
+					&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;&#123;&#123;route.fullPath&#125;&#125;&lt;/a&gt;
 			&lt;/router-link&gt;
 	&lt;/template&gt;
 &lt;/ContextMenu&gt;
-</template>
+
 </code></pre>
 
         <h5>Properties</h5>
@@ -438,8 +437,8 @@ export default {
         <h6>Screen Reader</h6>
         <p>
             ContextMenu component uses the <i>menubar</i> role with <i>aria-orientation</i> set to "vertical" and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a
-                <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a ContextMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined
-                as the id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
+            <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a ContextMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as
+            the id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
         </p>
 
         <h6>Keyboard Support</h6>
@@ -522,8 +521,7 @@ export default {
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/datatable/ColGroup.vue

@@ -55,7 +55,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableColGroupDemo" :sources="sources" github="datatable/DataTableColGroupDemo.vue" /> </ClientOnly>
+        <AppDoc name="DataTableColGroupDemo" :sources="sources" github="datatable/DataTableColGroupDemo.vue" />
     </div>
 </template>
 

pages/datatable/ColResize.vue

@@ -33,7 +33,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColResizeDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColResizeDemo.vue" />
     </div>
 </template>
 

pages/datatable/ColToggle.vue

@@ -22,7 +22,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableColToggleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColToggleDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableColToggleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColToggleDemo.vue" />
     </div>
 </template>
 

pages/datatable/ContextMenu.vue

@@ -25,7 +25,7 @@
             <ContextMenu ref="cm" :model="menuModel" />
         </div>
 
-        <ClientOnly><AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableContextMenuDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableContextMenuDemo.vue" />
     </div>
 </template>
 

pages/datatable/Crud.vue

@@ -171,7 +171,7 @@
             </Dialog>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" />
     </div>
 </template>
 

pages/datatable/DataTableBasicDoc.vue

@@ -1,5 +1,5 @@
 <template>
-    <ClientOnly><AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableBasicDemo.vue" /></ClientOnly>
+    <AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableBasicDemo.vue" />
 </template>
 
 <script>

pages/datatable/DataTableDoc.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="content-section documentation">
-        <ClientOnly
-            ><AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableDemo.vue">
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-small']" github="datatable/DataTableDemo.vue">
             <h5>Import via Module</h5>
             <pre v-code.script><code>
 import DataTable from 'primevue/datatable';
@@ -65,14 +64,14 @@ export default class CarService {
 </code></pre>
 
             <p>Following sample datatable has 4 columns and retrieves the data from a service on mount.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <pre v-code.script><code>
@@ -97,11 +96,11 @@ export default {
 
             <h5>Dynamic Columns</h5>
             <p>Column components can be dynamically generated using a v-for as well.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars"&gt;
     &lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <pre v-code.script><code>
@@ -504,18 +503,18 @@ export default {
 
             <h5>Auto Layout</h5>
             <p>
-                    Default table-layout is fixed meaning the cell widths do not depend on their content. If you require cells to scale based on their contents set <i>autoLayout</i> property to true. Note that Scrollable and/or Resizable tables do
-                    not support auto layout due to technical limitations.
+                Default table-layout is fixed meaning the cell widths do not depend on their content. If you require cells to scale based on their contents set <i>autoLayout</i> property to true. Note that Scrollable and/or Resizable tables do not
+                support auto layout due to technical limitations.
             </p>
 
             <h5>Templating</h5>
             <p>
                 Field data of a corresponding row is displayed as the cell content by default, this can be customized using a <i>body</i> template where current row data and column properties are passed via the slot props. On the other hand,
-                    <i>header</i> and <i>footer</i> sections of a column can either be defined with the properties or the templates. Similarly DataTable itself also provides header and footer properties along with the templates for the main header
-                    and footer of the table.
+                <i>header</i> and <i>footer</i> sections of a column can either be defined with the properties or the templates. Similarly DataTable itself also provides header and footer properties along with the templates for the main header and
+                footer of the table.
             </p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars"&gt;
     &lt;template #header&gt;
         &lt;div&gt;
@@ -544,13 +543,13 @@ export default {
         In total there are &#123;&#123;cars ? cars.length : 0 &#125;&#125; cars.
     &lt;/template&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h5>Sizes</h5>
             <p>In addition to the regular table, a smal and a large version are available with different paddings. For a table with smaller paddings use <i>p-datatable-sm</i> class and for a larger one use <i>p-datatable-lg</i>.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" class="p-datatable-sm"&gt;
     &lt;template #header&gt;
         Small Table
@@ -580,12 +579,12 @@ export default {
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h5>Column Grouping</h5>
             <p>Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="sales"&gt;
     &lt;ColumnGroup type="header"&gt;
         &lt;Row&gt;
@@ -616,27 +615,27 @@ export default {
         &lt;/Row&gt;
     &lt;/ColumnGroup&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h5>Pagination</h5>
             <p>
-                    Pagination is enabled by setting <i>paginator</i> property to true and defining the <i>rows</i> property defines the number of rows per page. See the <router-link to="/paginator">Paginator</router-link> for the available
-                    customization options such as paginator templates, page links, rows per page options and more which can be passed through the DataTable.
+                Pagination is enabled by setting <i>paginator</i> property to true and defining the <i>rows</i> property defines the number of rows per page. See the <router-link to="/paginator">Paginator</router-link> for the available customization
+                options such as paginator templates, page links, rows per page options and more which can be passed through the DataTable.
             </p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" :paginator="true" :rows="10"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <p><i>paginatorstart</i> and <i>paginatorend</i> templates are available to specify custom content at the left and right side.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" :paginator="true" :rows="10"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -649,52 +648,52 @@ export default {
         &lt;Button type="button" icon="pi pi-cloud" /&gt;
     &lt;/template&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <p>
-                    Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the first element to display. For example setting first to zero will reset the paginator to the very first
-                    page. This property also supports v-model in case you'd like your binding to be updated whenever the user changes the page.
+                Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the first element to display. For example setting first to zero will reset the paginator to the very first page.
+                This property also supports v-model in case you'd like your binding to be updated whenever the user changes the page.
             </p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" :paginator="true" :rows="10" :first="firstRecordIndex"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h5>Sorting</h5>
             <p>Enabling <i>sortable</i> property at column component would be enough to make a column sortable. The property to use when sorting is the <i>field</i> by default and can be customized using the <i>sortField</i>.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars"&gt;
     &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <p>By default sorting is executed on the clicked column only. To enable multiple field sorting, set <i>sortMode</i> property to "multiple" and use metakey when clicking on another column.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" sortMode="multiple"&gt;
     &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <p>
-                    In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These two properties also support the v-model
-                    directive to get updated when the user applies sort a column.
+                In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These two properties also support the v-model directive to
+                get updated when the user applies sort a column.
             </p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" sortField="year" :sortOrder="1"&gt;
     &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
@@ -708,18 +707,18 @@ export default {
     &lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <p>In multiple mode, use the <i>multiSortMeta</i> property and bind an array of SortMeta objects instead.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" sortMode="multiple" :multiSortMeta="multiSortMeta"&gt;
     &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <pre v-code.script><code>
@@ -736,10 +735,10 @@ data() {
 
             <h5>Filtering</h5>
             <p>
-                    DataTable has advanced filtering capabilities that does the heavy lifting while providing flexible customization. Filtering has two layout alternatives defined with the <i>filterDisplay</i>. In <b>row</b> setting, filter elements
-                    are displayed in a separate row at the header section whereas in <i>menu</i> mode filter elements are displayed inside an overlay. Filter metadata is specified using the <i>filters</i> as a v-model and UI elements for the
-                    filtering are placed inside the filter template. The template filter gets a <i>filterModel</i> and <i>filterCallback</i>, use filterModel.value to populate the filter with your own form components and call the filterCallback with
-                    the event of your choice like @input, @change, @click.
+                DataTable has advanced filtering capabilities that does the heavy lifting while providing flexible customization. Filtering has two layout alternatives defined with the <i>filterDisplay</i>. In <b>row</b> setting, filter elements are
+                displayed in a separate row at the header section whereas in <i>menu</i> mode filter elements are displayed inside an overlay. Filter metadata is specified using the <i>filters</i> as a v-model and UI elements for the filtering are
+                placed inside the filter template. The template filter gets a <i>filterModel</i> and <i>filterCallback</i>, use filterModel.value to populate the filter with your own form components and call the filterCallback with the event of your
+                choice like @input, @change, @click.
             </p>
 
             <pre v-code.script><code>
@@ -767,7 +766,7 @@ export default {
             <h6>Filter Row</h6>
             <p>Input field is displayed in a separate header row.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="customers1"
                     dataKey="id" v-model:filters="filters" filterDisplay="row" :loading="loading"&gt;
     &lt;Column field="name" header="Name"&gt;
@@ -776,13 +775,13 @@ export default {
         &lt;/template&gt;
     &lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h6>Filter Menu</h6>
             <p>Input field is displayed in an overlay.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="customers1"
                     dataKey="id" v-model:filters="filters" filterDisplay="menu" :loading="loading"&gt;
     &lt;Column field="name" header="Name"&gt;
@@ -791,7 +790,7 @@ export default {
         &lt;/template&gt;
     &lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h6>Multiple Constraints</h6>
@@ -862,13 +861,13 @@ app.use(PrimeVue, {
 </code></pre>
 
             <p>If you need to override the match modes for a particular column use the <i>filterMatchModeOptions</i> property and provide an array with label-value pairs.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;Column field="name" header="Name" :filterMatchModeOptions="matchModes"&gt;
     &lt;template #filter="{filterModel,filterCallback}"&gt;
         &lt;InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`"/&gt;
     &lt;/template&gt;
 &lt;/Column&gt;
-</template>
+
 </code></pre>
 
             <pre v-code.script><code>
@@ -897,7 +896,7 @@ matchModes: [
             <h6>Filter Slots</h6>
             <p>Filter menu overlay can be customized even further with various templates including <i>filterheader</i>, <i>filterfooter</i>, <i>filterclear</i>, <i>filterapply</i>. Example here changes the buttons and adds a footer.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;Column header="Country" filterField="country.name"&gt;
     &lt;template #filter="{filterModel}"&gt;
         &lt;InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country"/&gt;
@@ -912,48 +911,48 @@ matchModes: [
         &lt;div class="px-3 pt-0 pb-3 text-center font-bold"&gt;Customized Buttons&lt;/div&gt;
     &lt;/template&gt;
 &lt;/Column&gt;
-</template>
+
 </code></pre>
 
             <h5>Selection</h5>
             <p>
-                    DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the v-model directive. Alternatively column based selection can be done using
-                    radio buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition row-select and row-unselect events are provided as optional callbacks.
+                DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the v-model directive. Alternatively column based selection can be done using radio
+                buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition row-select and row-unselect events are provided as optional callbacks.
             </p>
 
             <p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory however being able to define it increases the performance of the table signifantly.</p>
 
             <p>In single mode, selection binding is an object reference.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" v-model:selection="selectedCar" selectionMode="single" dataKey="vin"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <p>
-                    In multiple mode, selection binding should be an array and multiple items can either be selected using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On
-                    touch enabled devices metaKeySelection is turned off automatically. Additionally ShiftKey is supported for range selection.
+                In multiple mode, selection binding should be an array and multiple items can either be selected using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch
+                enabled devices metaKeySelection is turned off automatically. Additionally ShiftKey is supported for range selection.
             </p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" v-model:selection="selectedCars" selectionMode="multiple" dataKey="vin"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <p>
-                    If you prefer a radioButton or a checkbox instead of a row click, use the <i>selectionMode</i> of a column instead. Following datatable displays a checkbox at the first column of each row and automatically adds a header checkbox
-                    to toggle selection of all rows.
+                If you prefer a radioButton or a checkbox instead of a row click, use the <i>selectionMode</i> of a column instead. Following datatable displays a checkbox at the first column of each row and automatically adds a header checkbox to
+                toggle selection of all rows.
             </p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" v-model:selection="selectedCars" dataKey="vin"&gt;
     &lt;Column selectionMode="multiple"&gt;&lt;/Column&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -961,19 +960,19 @@ matchModes: [
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h5>Scrolling</h5>
             <p>DataTable supports both horizontal and vertical scrolling as well as frozen columns and rows. Scrollable DataTable is enabled using <i>scrollable</i> property and <i>scrollHeight</i> to define the viewport height.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" :scrollable="true" scrollHeight="400px"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h5>Column Widths of a Scrollable Table</h5>
@@ -984,9 +983,9 @@ matchModes: [
                 <li>In vertical scrolling only, use <i>flex</i> to disable grow and shrink while defining a initial width. When horizontal scrolling is enabled, this is not required as columns do not grow or shrink in horizontal scrolling.</li>
             </ul>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;Column field="vin" header="Vin" style="flex: 0 0 4rem"&gt;&lt;/Column&gt;
-</template>
+
 </code></pre>
 
             <h6>Flex Scroll</h6>
@@ -994,7 +993,7 @@ matchModes: [
                 In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size dynamically
                 responds to the dialog size changes such as maximizing.
             </p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;Button label="Show" icon="pi pi-external-link" @click="openDialog" /&gt;
 &lt;Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
     &lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt;
@@ -1008,12 +1007,12 @@ matchModes: [
         &lt;Button label="No" icon="pi pi-times" @click="closeDialog" class="p-button-secondary"/&gt;
     &lt;/template&gt;
 &lt;/Dialog&gt;
-</template>
+
 </code></pre>
 
             <h6>Full Page Scroll</h6>
             <p>FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size. See the <router-link to="/datatable/flexscroll">full page</router-link> demo for an example.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;div style="height: calc(100vh - 143px)"&gt;
     &lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt;
         &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -1022,12 +1021,12 @@ matchModes: [
         &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
     &lt;/DataTable&gt;
 &lt;/div&gt;
-</template>
+
 </code></pre>
 
             <h6>Horizontal Scrolling</h6>
             <p>For horizontal scrolling, it is required to set <i>scrollDirection</i> to "horizontal" and give fixed widths to columns.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="customers" :scrollable="true"  scrollDirection="horizontal"&gt;
     &lt;Column field="id" header="Id" footer="Id" :style="{width:'200px'}"&gt;&lt;/Column&gt;
     &lt;Column field="name" header="Name" footer="Name" :style="{width:'200px'}"&gt;&lt;/Column&gt;
@@ -1039,12 +1038,12 @@ matchModes: [
     &lt;Column field="activity" header="Activity" footer="Activity" :style="{width:'200px'}"&gt;&lt;/Column&gt;
     &lt;Column field="representative.name" header="Representative" footer="Representative" :style="{width:'200px'}"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h6>Horizontal and Vertical Scrolling</h6>
             <p>Set <i>scrollDirection</i> to "both" and give fixed widths to columns to scroll both ways.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="customers" :scrollable="true" scrollHeight="400px" scrollDirection="both"&gt;
     &lt;Column field="id" header="Id" footer="Id" :style="{width:'200px'}"&gt;&lt;/Column&gt;
     &lt;Column field="name" header="Name" footer="Name" :style="{width:'200px'}"&gt;&lt;/Column&gt;
@@ -1056,26 +1055,26 @@ matchModes: [
     &lt;Column field="activity" header="Activity" footer="Activity" :style="{width:'200px'}"&gt;&lt;/Column&gt;
     &lt;Column field="representative.name" header="Representative" footer="Representative" :style="{width:'200px'}"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h6>Frozen Rows</h6>
             <p>Frozen rows are used to fix certain rows while scrolling, this data is defined with the <i>frozenValue</i> property.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="customers" :frozenValue="lockedCustomers" :scrollable="true" scrollHeight="400px"&gt;
     &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
     &lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
     &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
     &lt;Column field="status" header="Status"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h6>Frozen Columns</h6>
             <p>Certain columns can be frozen by using the <i>frozen</i> property of the column component. In addition <i>alignFrozen</i> is available to define whether the column should be fixed on the left or right.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="customers" :scrollable="true" scrollHeight="400px" scrollDirection="both"&gt;
     &lt;Column field="name" header="Name" :style="{width:'200px'}" frozen&gt;&lt;/Column&gt;
     &lt;Column field="id" header="Id" :style="{width:'100px'}" :frozen="idFrozen"&gt;&lt;/Column&gt;
@@ -1088,7 +1087,7 @@ matchModes: [
     &lt;Column field="representative.name" header="Representative" :style="{width:'200px'}"&gt;&lt;/Column&gt;
     &lt;Column field="balance" header="Balance" :style="{width:'200px'}" frozen alignFrozen="right"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h6>Scrollable RowGroup</h6>
@@ -1099,25 +1098,25 @@ matchModes: [
 
             <h5>Lazy Loading</h5>
             <p>
-                    Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks such as paging and sorting. It is also important to assign the logical number
-                    of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI accordingly.
+                Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks such as paging and sorting. It is also important to assign the logical number of
+                rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI accordingly.
             </p>
 
             <p>
-                    Lazy loading is implemented by handling <i>page</i>, <i>sort</i>, <i>filter</i> events by making a remote query using the information passed to these events such as first offset, number of rows, sort field for ordering and
-                    filters. Note that, in lazy filtering totalRecords should also be updated to align the data with the paginator.
+                Lazy loading is implemented by handling <i>page</i>, <i>sort</i>, <i>filter</i> events by making a remote query using the information passed to these events such as first offset, number of rows, sort field for ordering and filters.
+                Note that, in lazy filtering totalRecords should also be updated to align the data with the paginator.
             </p>
 
             <p>Visit the <router-link to="/datatable/lazy">lazy loading</router-link> demo for an example with a remote datasource.</p>
 
             <h5>Row Expansion</h5>
             <p>
-                    Rows can be expanded to display additional content using the <i>expandedRows</i> property with the v-model directive accompanied by a template named "expansion". <i>row-expand</i> and <i>row-collapse</i> are optional callbacks
-                    that are invoked when a row is expanded or toggled.
+                Rows can be expanded to display additional content using the <i>expandedRows</i> property with the v-model directive accompanied by a template named "expansion". <i>row-expand</i> and <i>row-collapse</i> are optional callbacks that
+                are invoked when a row is expanded or toggled.
             </p>
 
             <p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory in row expansion functionality however being able to define it increases the performance of the table significantly.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" v-model:expandedRows="expandedRows" dataKey="vin"
     @row-expand="onRowExpand" @row-collapse="onRowCollapse"&gt;
     &lt;template #header&gt;
@@ -1146,7 +1145,7 @@ matchModes: [
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <pre v-code.script><code>
@@ -1190,12 +1189,12 @@ export default {
             <p>In cell editing provides a rapid and user friendly way to manipulate the data. The datatable provides a flexible API so that the editing behavior is implemented by the page author whether it utilizes v-model or vuex.</p>
 
             <p>
-                    Individual cell editing is configured by setting the <i>editMode</i> to <b>cell</b>, defining editors with the <b>editor</b> template along with the <i>@cell-edit-complete</i> event. The content of the editor defines how the
-                    editing is implemented. The editor template receives a clone of the row data and using <i>@cell-edit-complete</i> event the new value can be updated to the model or cancelled. This also provides flexibility to apply conditional
-                    logic such as implementing validations.
+                Individual cell editing is configured by setting the <i>editMode</i> to <b>cell</b>, defining editors with the <b>editor</b> template along with the <i>@cell-edit-complete</i> event. The content of the editor defines how the editing
+                is implemented. The editor template receives a clone of the row data and using <i>@cell-edit-complete</i> event the new value can be updated to the model or cancelled. This also provides flexibility to apply conditional logic such as
+                implementing validations.
             </p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;h5&gt;Cell Editing&lt;/h5&gt;
 &lt;DataTable :value="cars" editMode="cell" @cell-edit-complete="onCellEditComplete"&gt;
     &lt;Column field="vin" header="Vin"&gt;
@@ -1214,7 +1213,7 @@ export default {
                 &lt;template #option="optionProps"&gt;
                     &lt;div class="p-dropdown-car-option"&gt;
                         &lt;img :alt="optionProps.option.brand" :src="'demo/images/car/' + optionProps.option.brand + '.png'" /&gt;
-                        &lt;span&gt;{{optionProps.option.brand}}&lt;/span&gt;
+                        &lt;span&gt;&#123;&#123;optionProps.option.brand&#125;&#125;&lt;/span&gt;
                     &lt;/div&gt;
                 &lt;/template&gt;
             &lt;/Dropdown&gt;
@@ -1226,7 +1225,7 @@ export default {
         &lt;/template&gt;
     &lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <pre v-code.script><code>
@@ -1297,7 +1296,7 @@ export default {
                 implementing <i>@row-edit-save</i> to update the original row data. Note that since <i>editingRows</i> is two-way binding enabled, you may use it to initially display one or more rows in editing more or programmatically toggle row
                 editing.
             </p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;h3&gt;Row Editing&lt;/h3&gt;
 &lt;DataTable :value="cars" editMode="row" dataKey="vin" v-model:editingRows="editingRows" @row-edit-save="onRowEditSave"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -1318,7 +1317,7 @@ export default {
     &lt;/Column&gt;
     &lt;Column :rowEditor="true" headerStyle="width:7rem" bodyStyle="text-align:center"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <pre v-code.script><code>
@@ -1355,48 +1354,48 @@ export default {
                 Columns can be resized using drag drop by setting the <i>resizableColumns</i> to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized. In
                 "expand" mode, table width also changes along with the column width. <i>column-resize-end</i> is a callback that passes the resized column header and delta change as a parameter.
             </p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit | expand"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <p>It is important to note that when you need to change column widths, since table width is 100%, giving fixed pixel widths does not work well as browsers scale them, instead give percentage widths.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit | expand"&gt;
     &lt;Column field="vin" header="Vin" headerStyle="width: 20%"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" headerStyle="width: 40%"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand" headerStyle="width: 20%"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color" headerStyle="width: 20%"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h5>Column Reorder</h5>
             <p>
-                    Columns can be reordered using drag drop by setting the <i>reorderableColumns</i> to true. <i>column-reorder</i> is a callback that is invoked when a column is reordered. DataTable keeps the column order state internally using
-                    keys that identifies a column using the field property. If the column has no field, use columnKey instead as it is mandatory for columns to have unique keys when reordering is enabled.
+                Columns can be reordered using drag drop by setting the <i>reorderableColumns</i> to true. <i>column-reorder</i> is a callback that is invoked when a column is reordered. DataTable keeps the column order state internally using keys
+                that identifies a column using the field property. If the column has no field, use columnKey instead as it is mandatory for columns to have unique keys when reordering is enabled.
             </p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" :reorderableColumns="true"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h5>Row Reorder</h5>
             <p>
-                    Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle along with the <i>row-reorder</i> event which is <b>mandatory</b> to update the new order. Note that the reorder icon can
-                    be customized using <i>rowReorderIcon</i> of the column component.
+                Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle along with the <i>row-reorder</i> event which is <b>mandatory</b> to update the new order. Note that the reorder icon can be
+                customized using <i>rowReorderIcon</i> of the column component.
             </p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" @row-reorder="onRowReorder"&gt;
     &lt;Column :rowReorder="true" headerStyle="width: 3em" /&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -1404,7 +1403,7 @@ export default {
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <pre v-code.script><code>
@@ -1442,7 +1441,7 @@ export default {
 
             <p>Example below demonstrates the all grouping alternatives. Note that data needs to be sorted for grouping which can also be done by the table itself by speficying the sort properties.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;h3&gt;Subheader Grouping&lt;/h3&gt;
 &lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
     sortMode="single" sortField="brand" :sortOrder="1"&gt;
@@ -1493,7 +1492,7 @@ export default {
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
     &lt;Column field="price" header="Price"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <pre v-code.script><code>
@@ -1540,7 +1539,7 @@ export default {
 
             <h5>Data Export</h5>
             <p>DataTable can export its data in CSV format using <i>exportCSV()</i> method.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>>
 &lt;DataTable :value="cars" ref="dt"&gt;
     &lt;template #header&gt;
         &lt;div style="text-align: left"&gt;
@@ -1552,7 +1551,7 @@ export default {
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <pre v-code.script><code>
@@ -1582,11 +1581,11 @@ export default {
 
             <h5>TableState</h5>
             <p>
-                    Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using its last settings. Enabling state is
-                    easy as defining a unique <i>stateKey</i>, the storage to keep the state is defined with the <i>stateStorage</i> property that accepts session for sessionStorage and local for localStorage. Currently following features are
-                    supported by TableState; paging, sorting, filtering, column resizing, column reordering, row expansion, row group expansion and row selection.
+                Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using its last settings. Enabling state is easy as
+                defining a unique <i>stateKey</i>, the storage to keep the state is defined with the <i>stateStorage</i> property that accepts session for sessionStorage and local for localStorage. Currently following features are supported by
+                TableState; paging, sorting, filtering, column resizing, column reordering, row expansion, row group expansion and row selection.
             </p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" :paginator="true" :rows="10" v-model:filters="filters"
     stateStorage="session" stateKey="dt-state-demo-session"
     v-model:selection="selectedCar" selectionMode="single" dataKey="vin"&gt;
@@ -1627,7 +1626,7 @@ export default {
         No records found.
     &lt;/template&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <pre v-code.script><code>
@@ -1676,7 +1675,7 @@ export default {
 
             <h5>ContextMenu</h5>
             <p>DataTable provides exclusive integration with the ContextMenu component using, <i>contextMenu</i>, <i>contextMenuSelection</i> property along with the <i>row-contextmenu</i> event.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" contextMenu v-model:contextMenuSelection="selectedCar" @row-contextmenu="onRowContextMenu"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -1685,7 +1684,7 @@ export default {
 &lt;/DataTable&gt;
 
 &lt;ContextMenu :model="menuModel" ref="cm" /&gt;
-</template>
+
 </code></pre>
 
             <pre v-code.script><code>
@@ -1728,7 +1727,7 @@ export default {
 
             <h5>Empty Message</h5>
             <p>When there is no data, you may use the <i>empty</i> template to display a message.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars"&gt;
     &lt;template #empty&gt;
         No records found
@@ -1738,15 +1737,15 @@ export default {
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h5>Loading</h5>
             <p>
-                    A loading status indicator can be displayed when the <i>loading</i> property is enabled. The icon is customized through <i>loadingIcon</i> property. Additionally an option loading template is available to render as the body until
-                    the data is loaded.
+                A loading status indicator can be displayed when the <i>loading</i> property is enabled. The icon is customized through <i>loadingIcon</i> property. Additionally an option loading template is available to render as the body until the
+                data is loaded.
             </p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" :loading="loading"&gt;
     &lt;template #loading&gt;
         Loading records, please wait...
@@ -1756,7 +1755,7 @@ export default {
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <pre v-code.script><code>
@@ -1788,38 +1787,38 @@ export default {
 
             <h5>Responsive</h5>
             <p>
-                    DataTable responsive layout can be achieved in two ways; first approach is displaying a horizontal scrollbar for smaller screens and second one is defining a breakpoint to display the cells of a row as stacked. Scrollable tables
-                    use the scroll layout approach internally and do not require additional configuration.
+                DataTable responsive layout can be achieved in two ways; first approach is displaying a horizontal scrollbar for smaller screens and second one is defining a breakpoint to display the cells of a row as stacked. Scrollable tables use
+                the scroll layout approach internally and do not require additional configuration.
             </p>
 
             <h6>Scroll Layout</h6>
             <p>
-                    Set <i>responsiveLayout</i> to scroll to enabled this layout. Note that, when scroll mode is enabled table-layout automatically switches to auto from fixed as a result table widths are likely to differ and resizable columns are
-                    not supported. Read more about <a href="https://www.w3schools.com/cssref/pr_tab_table-layout.asp">table-layout</a> for more details.
+                Set <i>responsiveLayout</i> to scroll to enabled this layout. Note that, when scroll mode is enabled table-layout automatically switches to auto from fixed as a result table widths are likely to differ and resizable columns are not
+                supported. Read more about <a href="https://www.w3schools.com/cssref/pr_tab_table-layout.asp">table-layout</a> for more details.
             </p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="products" responsiveLayout="scroll"&gt;
 
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h6>Stack Layout</h6>
             <p>In stack layout, columns are displayed as stacked after a certain breakpoint. Default is '960px'.</p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="products" responsiveLayout="stack" breakpoint="640px"&gt;
 
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <h5>Row and Cell Styling</h5>
             <p>
-                    Certain rows or cells can easily be styled based on conditions. Cell styling is implemented with templating whereas row styling utilizes the <i>rowClass</i> property which takes the row data as a parameter and returns the style
-                    class as a string.
+                Certain rows or cells can easily be styled based on conditions. Cell styling is implemented with templating whereas row styling utilizes the <i>rowClass</i> property which takes the row data as a parameter and returns the style class
+                as a string.
             </p>
-                <pre v-code><code><template v-pre>
+            <pre v-code><code>
 &lt;DataTable :value="cars" :rowClass="rowClass"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" bodyStyle="padding: 0"&gt;
@@ -1832,7 +1831,7 @@ export default {
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
-</template>
+
 </code></pre>
 
             <pre v-code.script><code>
@@ -2762,9 +2761,9 @@ export default {
             <h5>Accessibility</h5>
             <h6>Screen Reader</h6>
             <p>
-                    DataTable uses a <i>table</i> element whose attributes can be extended with the <i>tableProps</i> option. This property allows passing aria roles and attributes like <i>aria-label</i> and <i>aria-describedby</i> to define the
-                    table for readers. Default role of the table is <i>table</i>. Header, body and footer elements use <i>rowgroup</i>, rows use <i>row</i> role, header cells have <i>columnheader</i> and body cells use <i>cell</i> roles. Sortable
-                    headers utilizer <i>aria-sort</i> attribute either set to "ascending" or "descending".
+                DataTable uses a <i>table</i> element whose attributes can be extended with the <i>tableProps</i> option. This property allows passing aria roles and attributes like <i>aria-label</i> and <i>aria-describedby</i> to define the table
+                for readers. Default role of the table is <i>table</i>. Header, body and footer elements use <i>rowgroup</i>, rows use <i>row</i> role, header cells have <i>columnheader</i> and body cells use <i>cell</i> roles. Sortable headers
+                utilizer <i>aria-sort</i> attribute either set to "ascending" or "descending".
             </p>
 
             <p>
@@ -2773,21 +2772,20 @@ export default {
             </p>
 
             <p>
-                    The element to expand or collapse a row is a <i>button</i> with <i>aria-expanded</i> and <i>aria-controls</i> properties. Value to describe the buttons is derived from <i>aria.expandRow</i> and <i>aria.collapseRow</i> properties
-                    of the <router-link to="/locale">locale</router-link> API.
+                The element to expand or collapse a row is a <i>button</i> with <i>aria-expanded</i> and <i>aria-controls</i> properties. Value to describe the buttons is derived from <i>aria.expandRow</i> and <i>aria.collapseRow</i> properties of
+                the <router-link to="/locale">locale</router-link> API.
             </p>
 
             <p>
-                    The filter menu button use <i>aria.showFilterMenu</i> and <i>aria.hideFilterMenu</i> properties as <i>aria-label</i> in addition to the <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation
-                    between the button and the overlay. Popop menu has <i>dialog</i> role with <i>aria-modal</i> as focus is kept within the overlay. The operator dropdown use <i>aria.filterOperator</i> and filter constraints dropdown use
-                    <i>aria.filterConstraint</i> properties. Buttons to add rules on the other hand utilize <i>aria.addRule</i> and <i>aria.removeRule</i> properties. The footer buttons similarly use <i>aria.clear</i> and
-                    <i>aria.apply</i> properties. <i>filterInputProps</i> of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria
-                    labels as well.
+                The filter menu button use <i>aria.showFilterMenu</i> and <i>aria.hideFilterMenu</i> properties as <i>aria-label</i> in addition to the <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between
+                the button and the overlay. Popop menu has <i>dialog</i> role with <i>aria-modal</i> as focus is kept within the overlay. The operator dropdown use <i>aria.filterOperator</i> and filter constraints dropdown use
+                <i>aria.filterConstraint</i> properties. Buttons to add rules on the other hand utilize <i>aria.addRule</i> and <i>aria.removeRule</i> properties. The footer buttons similarly use <i>aria.clear</i> and <i>aria.apply</i> properties.
+                <i>filterInputProps</i> of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria labels as well.
             </p>
 
             <p>
-                    Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with <i>aria.editRow</i>, <i>aria.cancelEdit</i> and <i>aria.saveEdit</i> used
-                    for the <i>aria-label</i>.
+                Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with <i>aria.editRow</i>, <i>aria.cancelEdit</i> and <i>aria.saveEdit</i> used for
+                the <i>aria-label</i>.
             </p>
 
             <p>Paginator is a standalone component used inside the DataTable, refer to the <router-link to="/paginator">paginator</router-link> for more information about the accessibility features.</p>
@@ -2935,8 +2933,7 @@ export default {
 
             <h5>Dependencies</h5>
             <p>None.</p>
-            </AppDoc></ClientOnly
-        >
+        </AppDoc>
     </div>
 </template>
 

pages/datatable/DynamicColumns.vue

@@ -16,7 +16,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableDynamicColumnsDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableDynamicColumnsDemo.vue" />
     </div>
 </template>
 

pages/datatable/Edit.vue

@@ -70,7 +70,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableEditDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableEditDemo.vue" />
     </div>
 </template>
 

pages/datatable/Export.vue

@@ -24,7 +24,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableExportDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableExportDemo.vue" />
     </div>
 </template>
 

pages/datatable/Filter.vue

@@ -220,7 +220,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableFilterDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFilterDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableFilterDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFilterDemo.vue" />
     </div>
 </template>
 

pages/datatable/FlexScroll.vue

@@ -17,7 +17,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableFlexScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFlexScrollDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableFlexScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFlexScrollDemo.vue" />
     </div>
 </template>
 

pages/datatable/GridLines.vue

@@ -21,7 +21,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableGridLinesDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableGridLinesDemo.vue" />
     </div>
 </template>
 

pages/datatable/Lazy.vue

@@ -62,7 +62,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" github="datatable/DataTableLazyDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" github="datatable/DataTableLazyDemo.vue" />
     </div>
 </template>
 

pages/datatable/Paginator.vue

@@ -63,7 +63,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTablePaginatorDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTablePaginatorDemo.vue" />
     </div>
 </template>
 

pages/datatable/Reorder.vue

@@ -17,7 +17,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableReorderDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableReorderDemo.vue" />
     </div>
 </template>
 

pages/datatable/Responsive.vue

@@ -50,7 +50,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableResponsiveDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableResponsiveDemo.vue" />
     </div>
 </template>
 

pages/datatable/RowExpand.vue

@@ -69,7 +69,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableRowExpandDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" github="datatable/DataTableRowExpandDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableRowExpandDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" github="datatable/DataTableRowExpandDemo.vue" />
     </div>
 </template>
 

pages/datatable/RowGroup.vue

@@ -115,7 +115,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableRowGroupDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableRowGroupDemo.vue" />
     </div>
 </template>
 

pages/datatable/Scroll.vue

@@ -126,7 +126,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" github="datatable/DataTableScrollDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" github="datatable/DataTableScrollDemo.vue" />
     </div>
 </template>
 

pages/datatable/Selection.vue

@@ -79,7 +79,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSelectionDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSelectionDemo.vue" />
     </div>
 </template>
 

pages/datatable/Size.vue

@@ -40,7 +40,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSizeDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSizeDemo.vue" />
     </div>
 </template>
 

pages/datatable/Sort.vue

@@ -71,7 +71,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSortDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSortDemo.vue" />
     </div>
 </template>
 

pages/datatable/State.vue

@@ -142,7 +142,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableStateDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableStateDemo.vue" />
     </div>
 </template>
 

pages/datatable/Striped.vue

@@ -19,7 +19,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStripedDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStripedDemo.vue" />
     </div>
 </template>
 

pages/datatable/Style.vue

@@ -25,7 +25,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStyleDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStyleDemo.vue" />
     </div>
 </template>
 

pages/datatable/Templating.vue

@@ -43,7 +43,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableTemplatingDemo.vue" /> </ClientOnly>
+        <AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableTemplatingDemo.vue" />
     </div>
 </template>
 

pages/datatable/VirtualScroll.vue

@@ -61,7 +61,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="DataTableVirtualScrollDemo" :sources="sources" :service="['CarService']" github="datatable/DataTableVirtualScrollDemo.vue" /></ClientOnly>
+        <AppDoc name="DataTableVirtualScrollDemo" :sources="sources" :service="['CarService']" github="datatable/DataTableVirtualScrollDemo.vue" />
     </div>
 </template>
 

pages/dataview/DataViewDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue">
+    <AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue">
         <h5>Import via Module</h5>
 
         <pre v-code.script><code>
@@ -23,7 +22,7 @@ import DataView from 'primevue/dataview';
             DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an
             object to be displayed by the dataview. Cars are loaded by a CarService that connects to a server to fetch the cars.
         </p>
-            <pre v-code.script><code><template v-pre>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -38,13 +37,13 @@ export default {
         this.carService.getCarsLarge().then(data => this.cars = data);
     }
 }
-</template>
+
 </code></pre>
 
         <h5>Layouts</h5>
         <p>DataView has two layout modes; <i>list</i> and <i>grid</i> where a separate template is used to render an item in each mode. In list mode name of the template is "list" whereas in grid mode it is "grid".</p>
         <p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;template #list="slotProps"&gt;
 	&lt;div class="col-12"&gt;
         &lt;div class="car-details"&gt;
@@ -65,12 +64,12 @@ export default {
 	&lt;div style="padding: .5em" class="col-12 md:col-3"&gt;
 		&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
 			&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
-			&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
+			&lt;div class="car-detail"&gt;&#123;&#123;slotProps.data.year&#125;&#125; - &#123;&#123;slotProps.data.color&#125;&#125;&lt;/div&gt;
 			&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
 		&lt;/Panel&gt;
 	&lt;/div&gt;
 &lt;/template&gt;
-</template>
+
 </code></pre>
 
         <h5>Sections</h5>
@@ -90,23 +89,23 @@ export default {
 
         <h5>DataViewLayoutOptions</h5>
         <p>
-                When both layout modes are enabled in DataView, a UI element would be necessary to let the user toggle between the view. DataViewLayoutOptions is a helper component to display a buttonset to choose the layout mode in DataView.
-                Location of the DataViewLayoutOptions should be inside the DataView component. If you prefer a different UI element you can create your own that updates the layout property of the DataView.
+            When both layout modes are enabled in DataView, a UI element would be necessary to let the user toggle between the view. DataViewLayoutOptions is a helper component to display a buttonset to choose the layout mode in DataView. Location of
+            the DataViewLayoutOptions should be inside the DataView component. If you prefer a different UI element you can create your own that updates the layout property of the DataView.
         </p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;DataView :value="cars" :layout="layout"&gt;
 	&lt;template #header&gt;
 		&lt;DataViewLayoutOptions v-model="layout"&gt;&lt;/DataViewLayoutOptions&gt;
 	&lt;/template&gt;
 	&lt;template #list="slotProps" &gt;
-		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
+		&lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
 	&lt;/template&gt;
 	&lt;template #grid="slotProps"&gt;
-		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
+		&lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
 	&lt;/template&gt;
 &lt;/DataView&gt;
-</template>
+
 </code></pre>
 
         <h5>Paginator</h5>
@@ -114,7 +113,7 @@ export default {
             Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number of page links to display. To customize the left and right side of the paginators, use
             <i>paginatorstart</i> and <i>paginatorend</i> templates.
         </p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20"&gt;
 	&lt;template #paginatorstart&gt;
 		&lt;Button type="button" icon="pi pi-refresh"/&gt;
@@ -123,13 +122,13 @@ export default {
 		&lt;Button type="button" icon="pi pi-search" /&gt;
 	&lt;/template&gt;
 	&lt;template #list="slotProps" &gt;
-		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
+		&lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
 	&lt;/template&gt;
 	&lt;template #grid="slotProps"&gt;
-		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
+		&lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
 	&lt;/template&gt;
 &lt;/DataView&gt;
-</template>
+
 </code></pre>
 
         <h5>Sorting</h5>
@@ -137,7 +136,7 @@ export default {
             <i>sortField</i> and <i>sortOrder</i> properties are available for the sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element. Here is an example that uses a
             dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.
         </p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField"&gt;
     &lt;template #header&gt;
         &lt;div class="grid grid-nogutter"&gt;
@@ -150,16 +149,16 @@ export default {
         &lt;/div&gt;
     &lt;/template&gt;
 	&lt;template #list="slotProps" &gt;
-		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
+		&lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
 	&lt;/template&gt;
 	&lt;template #grid="slotProps"&gt;
-		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
+		&lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
 	&lt;/template&gt;
 &lt;/DataView&gt;
-</template>
+
 </code></pre>
 
-            <pre v-code.script><code><template v-pre>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -200,27 +199,27 @@ export default {
         }
     }
 }
-</template>
+
 </code></pre>
 
         <h5>Lazy Loading</h5>
         <p>
-                Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination and utilize the <i>page</i> callback to load your data from the backend. Pagination in this case needs to display the logical
-                number of records bound to the <i>totalRecords</i> property so that paginator can display itself according to the total records although you'd only need to load the data of the current page.
+            Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination and utilize the <i>page</i> callback to load your data from the backend. Pagination in this case needs to display the logical number
+            of records bound to the <i>totalRecords</i> property so that paginator can display itself according to the total records although you'd only need to load the data of the current page.
         </p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;DataView :value="cars" :layout="layout" :paginator="true" :rows="20" :lazy="true" @page="onPage($event)"&gt;
 	&lt;template #list="slotProps" &gt;
-		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
+		&lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
 	&lt;/template&gt;
 	&lt;template #grid="slotProps"&gt;
-		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
+		&lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
 	&lt;/template&gt;
 &lt;/DataView&gt;
-</template>
+
 </code></pre>
 
-            <pre v-code.script><code><template v-pre>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -238,7 +237,7 @@ export default {
         }
     }
 }
-</template>
+
 </code></pre>
 
         <h5>Properties</h5>
@@ -472,8 +471,8 @@ export default {
         <h5>Accessibility</h5>
         <h6>Screen Reader</h6>
         <p>
-                The container element that wraps the layout options buttons has a <i>group</i> role whereas each button element uses <i>button</i> role and <i>aria-pressed</i> is updated depending on selection state. Values to describe the buttons
-                are derived from the <i>aria.listView</i> and <i>aria.gridView</i> properties of the <router-link to="/locale">locale</router-link> API respectively.
+            The container element that wraps the layout options buttons has a <i>group</i> role whereas each button element uses <i>button</i> role and <i>aria-pressed</i> is updated depending on selection state. Values to describe the buttons are
+            derived from the <i>aria.listView</i> and <i>aria.gridView</i> properties of the <router-link to="/locale">locale</router-link> API respectively.
         </p>
 
         <p>Refer to <router-link to="/paginator">paginator</router-link> accessibility documentation for the paginator of the component.</p>
@@ -506,8 +505,7 @@ export default {
 
         <h5>Dependencies</h5>
         <p>PrimeFlex</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/deferredcontent/DeferredContentDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="deferredcontent/DeferredContentDemo.vue">
+    <AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="deferredcontent/DeferredContentDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import DeferredContent from 'primevue/deferredcontent';
@@ -16,7 +15,7 @@ import DeferredContent from 'primevue/deferredcontent';
 
         <h5>Getting Started</h5>
         <p>DeferredContent is used as a wrapper element of its content..</p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;DeferredContent&gt;
     &lt;DataTable :value="cars"&gt;
         &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -25,12 +24,12 @@ import DeferredContent from 'primevue/deferredcontent';
         &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
     &lt;/DataTable&gt;
 &lt;/DeferredContent&gt;
-</template>
+
 </code></pre>
 
         <h5>Load Event</h5>
         <p>onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.</p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;DeferredContent @load="onDataLoad"&gt;
     &lt;DataTable :value="cars"&gt;
         &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -39,7 +38,7 @@ import DeferredContent from 'primevue/deferredcontent';
         &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
     &lt;/DataTable&gt;
 &lt;/DeferredContent&gt;
-</template>
+
 </code></pre>
 
         <h5>Properties</h5>
@@ -87,8 +86,7 @@ import DeferredContent from 'primevue/deferredcontent';
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/dialog/DialogDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue">
+    <AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Dialog from 'primevue/dialog';
@@ -383,8 +382,8 @@ export default {
         </p>
         <p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
         <p>
-                Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use <i>closeButtonProps</i> to customize the
-                element and override the default <i>aria-label</i>.
+            Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use <i>closeButtonProps</i> to customize the element
+            and override the default <i>aria-label</i>.
         </p>
 
         <pre v-code><code>
@@ -454,8 +453,7 @@ export default {
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/divider/DividerDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue">
+    <AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Divider from 'primevue/divider';
@@ -179,8 +178,7 @@ import Divider from 'primevue/divider';
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/dock/DockDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="DockDemo" :sources="sources" github="dock/DockDemo.vue" :service="['NodeService', 'PhotoService']" :data="['treenodes', 'photos']">
+    <AppDoc name="DockDemo" :sources="sources" github="dock/DockDemo.vue" :service="['NodeService', 'PhotoService']" :data="['treenodes', 'photos']">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Dock from 'primevue/dock';
@@ -289,8 +288,7 @@ import Dock from 'primevue/dock';
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/dropdown/DropdownDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="DropdownDemo" :sources="sources" github="dropdown/DropdownDemo.vue">
+    <AppDoc name="DropdownDemo" :sources="sources" github="dropdown/DropdownDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Dropdown from 'primevue/dropdown';
@@ -78,17 +77,17 @@ export default {
 }
 </code></pre>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;Dropdown v-model="selectedGroupedCity" :options="groupedCities"
         optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"&gt;
 &lt;/Dropdown&gt;
-</template>
+
 </code></pre>
 
         <h5>Filtering</h5>
         <p>
-                Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize
-                the fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
+            Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize the
+            fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
         </p>
 
         <pre v-code><code>
@@ -98,28 +97,28 @@ export default {
 
         <h5>Templating</h5>
         <p>
-                Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>optiongroup</i>,
-                <i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
+            Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>optiongroup</i>, <i>header</i>,
+            <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
         </p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true"&gt;
     &lt;template #value="slotProps"&gt;
         &lt;div class="p-dropdown-car-value" v-if="slotProps.value"&gt;
             &lt;img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" /&gt;
-            &lt;span&gt;{{slotProps.value.brand}}&lt;/span&gt;
+            &lt;span&gt;&#123;&#123;slotProps.value.brand&#125;&#125;&lt;/span&gt;
         &lt;/div&gt;
         &lt;span v-else&gt;
-            {{slotProps.placeholder}}
+            &#123;&#123;slotProps.placeholder&#125;&#125;
         &lt;/span&gt;
     &lt;/template&gt;
     &lt;template #option="slotProps"&gt;
 		&lt;div class="p-dropdown-car-option"&gt;
 			&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
-			&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
+			&lt;span&gt;&#123;&#123;slotProps.option.brand&#125;&#125;&lt;/span&gt;
 		&lt;/div&gt;
 	&lt;/template&gt;
 &lt;/Dropdown&gt;
-</template>
+
 </code></pre>
 
         <h5>Properties</h5>
@@ -633,13 +632,13 @@ export default {
         <h5>Accessibility</h5>
         <h6>Screen Reader</h6>
         <p>
-                Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The dropdown element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. If
-                the editable option is enabled <i>aria-autocomplete</i> is also added. The relation between the combobox and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen reader
-                which option to read during keyboard navigation within the popup list.
+            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The dropdown element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. If the
+            editable option is enabled <i>aria-autocomplete</i> is also added. The relation between the combobox and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen reader which
+            option to read during keyboard navigation within the popup list.
         </p>
         <p>
-                The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>listbox</i> as the role. Each list item has an <i>option</i> role, an id to match the
-                <i>aria-activedescendant</i> of the input element along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.
+            The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>listbox</i> as the role. Each list item has an <i>option</i> role, an id to match the <i>aria-activedescendant</i> of
+            the input element along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.
         </p>
 
         <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.</p>
@@ -815,8 +814,7 @@ export default {
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/dynamicdialog/DynamicDialogDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
+    <AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
         <h5>DialogService</h5>
         <p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
 
@@ -315,8 +314,7 @@ export default {
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/editor/EditorDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="EditorDemo" :sources="sources" :dependencies="{ quill: '^1.3.7' }" component="Editor" github="editor/EditorDemo.vue">
+    <AppDoc name="EditorDemo" :sources="sources" :dependencies="{ quill: '^1.3.7' }" component="Editor" github="editor/EditorDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Editor from 'primevue/editor';
@@ -192,8 +191,7 @@ import Editor from 'primevue/editor';
 npm install quill --save
 
 </code></pre>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/fieldset/FieldsetDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue">
+    <AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Fieldset from 'primevue/fieldset';
@@ -183,8 +182,8 @@ import Fieldset from 'primevue/fieldset';
         <h5>Accessibility</h5>
         <h6>Screen Reader</h6>
         <p>
-                Fieldset component uses the semantic <i>fieldset</i> element. When toggleable option is enabled, a clickable element with <i>button</i> role is included inside the <i>legend</i> element, this button has <i>aria-controls</i> to define
-                the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value of the <i>legend</i> property and can be customized by defining an <i>aria-label</i> or
+            Fieldset component uses the semantic <i>fieldset</i> element. When toggleable option is enabled, a clickable element with <i>button</i> role is included inside the <i>legend</i> element, this button has <i>aria-controls</i> to define the
+            id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value of the <i>legend</i> property and can be customized by defining an <i>aria-label</i> or
             <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
         </p>
         <p>The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.</p>
@@ -221,8 +220,7 @@ import Fieldset from 'primevue/fieldset';
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/fileupload/FileUploadDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="FileUploadDemo" :sources="sources" github="fileupload/FileUploadDemo.vue">
+    <AppDoc name="FileUploadDemo" :sources="sources" github="fileupload/FileUploadDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import FileUpload from 'primevue/fileupload';
@@ -505,8 +504,7 @@ myUploader(event) {
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/filterservice/FilterServiceDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="filterservice/FilterServiceDemo.vue">
+    <AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="filterservice/FilterServiceDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import &#123;FilterService&#125; from 'primevue/api';
@@ -233,8 +232,7 @@ FilterService.filters['isPrimeNumber'](568985673);              //false
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/floatlabel/index.vue

@@ -112,7 +112,7 @@
             </div>
         </div>
 
-        <ClientOnly><AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="floatlabel/FloatLabelDemo.vue" /></ClientOnly>
+        <AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="floatlabel/FloatLabelDemo.vue" />
     </div>
 </template>
 

pages/focustrap/FocusTrapDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="FocusTrapDemo" :sources="sources" github="focustrap/FocusTrapDemo.vue">
+    <AppDoc name="FocusTrapDemo" :sources="sources" github="focustrap/FocusTrapDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import FocusTrap from 'primevue/focustrap';
@@ -25,11 +24,11 @@ directives: {
 
         <h5>Getting Started</h5>
         <p>FocusTrap is applied to a container element with the v-focustrap directive.</p>
-            <pre v-code><code><template v-pre>
+        <pre v-code><code>
 &lt;div v-focustrap&gt;
     //content
 &lt;/div&gt;
-</template>
+
 </code></pre>
 
         <h5>Properties</h5>
@@ -59,8 +58,7 @@ directives: {
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/fullcalendar/FullCalendarDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc
+    <AppDoc
         name="FullCalendarDemo"
         :sources="sources"
         :service="['EventService']"
@@ -10,8 +9,7 @@
         component="FullCalendar"
     >
         <p>As it is not a component from PrimeVue, refer to the FullCalendar <a href="https://fullcalendar.io/docs/vue">documentation</a> for more information.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/galleria/Advanced.vue

@@ -49,7 +49,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-                    <pre v-code><code><template v-pre>
+                    <pre v-code><code>
 &lt;Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
     :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
     :circular="true" :autoPlay="true" :transitionInterval="3000"&gt;
@@ -65,15 +65,15 @@
         &lt;div class="custom-galleria-footer"&gt;
             &lt;Button icon="pi pi-list" @click="onThumbnailButtonClick" /&gt;
             &lt;span v-if="images" class="title-container"&gt;
-                &lt;span&gt;{{activeIndex + 1}}/{{images.length}}&lt;/span&gt;
-                &lt;span class="title"&gt;{{images[activeIndex].title}}&lt;/span&gt;
-                &lt;span&gt;{{images[activeIndex].alt}}&lt;/span&gt;
+                &lt;span&gt;&#123;&#123;activeIndex + 1&#125;&#125;/&#123;&#123;images.length&#125;&#125;&lt;/span&gt;
+                &lt;span class="title"&gt;&#123;&#123;images[activeIndex].title&#125;&#125;&lt;/span&gt;
+                &lt;span&gt;&#123;&#123;images[activeIndex].alt&#125;&#125;&lt;/span&gt;
             &lt;/span&gt;
             &lt;Button :icon="fullScreenIcon" @click="toggleFullScreen" class="fullscreen-button" /&gt;
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
-</template>
+
 </code></pre>
 
                     <pre v-code.script><code>

pages/galleria/AutoPlay.vue

@@ -23,7 +23,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-                    <pre v-code><code><template v-pre>
+                    <pre v-code><code>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
     :circular="true" :autoPlay="true" :transitionInterval="2000"&gt;
     &lt;template #item="slotProps"&gt;
@@ -33,7 +33,7 @@
         &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
-</template>
+
 </code></pre>
 
                     <pre v-code.script><code>

pages/galleria/Caption.vue

@@ -29,7 +29,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-                    <pre v-code><code><template v-pre>
+                    <pre v-code><code>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt;
     &lt;template #item="{item}"&gt;
         &lt;img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" /&gt;
@@ -40,11 +40,11 @@
         &lt;/div&gt;
     &lt;/template&gt;
     &lt;template #caption="{item}"&gt;
-        &lt;h4 style="margin-bottom: .5rem;"&gt;{{item.title}}&lt;/h4&gt;
-        &lt;p&gt;{{item.alt}}&lt;/p&gt;
+        &lt;h4 style="margin-bottom: .5rem;"&gt;&#123;&#123;item.title&#125;&#125;&lt;/h4&gt;
+        &lt;p&gt;&#123;&#123;item.alt&#125;&#125;&lt;/p&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
-</template>
+
 </code></pre>
 
                     <pre v-code.script><code>

pages/galleria/FullScreen.vue

@@ -69,7 +69,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-                    <pre v-code><code><template v-pre>
+                    <pre v-code><code>
 &lt;h3&gt;With Thumbnails&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
     :circular="true" :fullScreen="true" :showItemNavigators="true" v-model:visible="displayBasic"&gt;
@@ -112,7 +112,7 @@
         &lt;img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)"/&gt;
     &lt;/div&gt;
 &lt;/div&gt;
-</template>
+
 </code></pre>
 
                     <pre v-code.script><code>

pages/galleria/GalleriaDoc.vue

@@ -625,7 +625,7 @@ responsiveOptions: [
                 <a href="https://github.com/primefaces/primevue/tree/master/src/views/galleria" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                     <span>View on GitHub</span>
                 </a>
-                <pre v-code><code><template v-pre>
+                <pre v-code><code>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
@@ -634,7 +634,7 @@ responsiveOptions: [
         &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
-</template>
+
 </code></pre>
 
                 <pre v-code.script><code>

pages/galleria/Indicator.vue

@@ -121,7 +121,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-                    <pre v-code><code><template v-pre>
+                    <pre v-code><code>
 &lt;h3&gt;Indicators with Click Event&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
     :showThumbnails="false" :showIndicators="true"&gt;
@@ -178,11 +178,11 @@
     &lt;/template&gt;
     &lt;template #indicator="{index}"&gt;
         &lt;span style="color: #e9ecef; cursor: pointer"&gt;
-            {{index + 1}}
+        &#123;&#123;index + 1&#125;&#125;
         &lt;/span&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
-</template>
+
 </code></pre>
 
                     <pre v-code.script><code>

pages/galleria/Navigator.vue

@@ -70,7 +70,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-                    <pre v-code><code><template v-pre>
+                    <pre v-code><code>
 &lt;h3&gt;Item Navigators and Thumbnails&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
     :showItemNavigators="true"&gt;
@@ -114,7 +114,7 @@
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
-</template>
+
 </code></pre>
 
                     <pre v-code.script><code>

pages/galleria/Programmatic.vue

@@ -28,7 +28,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-                    <pre v-code><code><template v-pre>
+                    <pre v-code><code>
 &lt;div style="padding: .5rem 0"&gt;
     &lt;Button icon="pi pi-minus" @click="prev" class="p-button-secondary" /&gt;
     &lt;Button icon="pi pi-plus" @click="next" class="p-button-secondary" style="margin-left: .5rem" /&gt;
@@ -42,7 +42,7 @@
         &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
-</template>
+
 </code></pre>
 
                     <pre v-code.script><code>

pages/galleria/Responsive.vue

@@ -23,7 +23,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-                    <pre v-code><code><template v-pre>
+                    <pre v-code><code>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
@@ -32,7 +32,7 @@
         &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
-</template>
+
 </code></pre>
 
                     <pre v-code.script><code>

pages/galleria/Thumbnail.vue

@@ -64,7 +64,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-                    <pre v-code><code><template v-pre>
+                    <pre v-code><code>
 &lt;h3&gt;Positioned at Bottom&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt;
     &lt;template #item="slotProps"&gt;
@@ -108,7 +108,7 @@
         &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
-</template>
+
 </code></pre>
 
                     <pre v-code.script><code>

pages/image/ImageDoc.vue

@@ -1,6 +1,5 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="ImageDemo" :sources="sources" github="image/ImageDemo.vue">
+    <AppDoc name="ImageDemo" :sources="sources" github="image/ImageDemo.vue">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Image from 'primevue/image';
@@ -218,8 +217,7 @@ import Image from 'primevue/image';
 
         <h5>Dependencies</h5>
         <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>