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

@@ -86,13 +86,6 @@
                 box-shadow: 0 0 0 2px var(--surface-ground), 0 0 0 4px var(--dd-primary), 0 1px 2px 0 rgba(0, 0, 0, 1.0);
             }
         }
-    
-        .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,10 +563,10 @@ export default {
             }
 
             let innerHTML = `
-            #${this.id} .p-carousel-item {
-                flex: 1 0 ${100 / this.d_numVisible}%
-            }
-        `;
+                .p-carousel[${this.attributeSelector}] .p-carousel-item {
+                    flex: 1 0 ${100 / this.d_numVisible}%
+                }
+            `;
 
             if (this.responsiveOptions) {
                 let _responsiveOptions = [...this.responsiveOptions];
@@ -589,12 +589,12 @@ export default {
                     let res = _responsiveOptions[i];
 
                     innerHTML += `
-                    @media screen and (max-width: ${res.breakpoint}) {
-                        #${this.id} .p-carousel-item {
-                            flex: 1 0 ${100 / res.numVisible}%
+                        @media screen and (max-width: ${res.breakpoint}) {
+                            .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

@@ -1,58 +1,58 @@
 {
-  "name": "primevue",
-  "version": "3.21.0",
-  "homepage": "https://www.primefaces.org/primevue",
-  "repository": {
-      "type": "git",
-      "url": "https://github.com/primefaces/primevue.git"
-  },
-  "license": "MIT",
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare",
-    "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",
-    "security:check": "npm audit --production --audit-level high",
-    "format": "prettier --write \"**/*.{js,vue,d.ts}\"",
-    "format:check": "prettier --check \"**/*.{js,vue,d.ts}\"",
-    "test:unit": "vitest",
-    "test:build": "NODE_ENV=production rollup -c"
-  },
-  "devDependencies": {
-    "@fullcalendar/core": "^5.11.0",
-    "@fullcalendar/daygrid": "^5.11.0",
-    "@fullcalendar/interaction": "^5.11.0",
-    "@fullcalendar/timegrid": "^5.11.0",
-    "@fullcalendar/vue3": "^5.11.0",
-    "@vitejs/plugin-vue-jsx": "^2.0.1",
-    "@vue/test-utils": "^2.0.0",
-    "@vuelidate/core": "^2.0.0-alpha.14",
-    "@vuelidate/validators": "^2.0.0-alpha.12",
-    "chart.js": "3.3.2",
-    "gulp": "^4.0.2",
-    "gulp-concat": "^2.6.0",
-    "gulp-flatten": "^0.4.0",
-    "gulp-rename": "^2.0.0",
-    "gulp-uglify": "^3.0.2",
-    "gulp-uglifycss": "^1.0.6",
-    "jsdom": "^19.0.0",
-    "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",
-    "rollup-plugin-vue": "^6.0.0-beta.9",
-    "sass": "^1.45.0",
-    "sass-loader": "^8.0.2",
-    "vitest": "^0.23.2",
-    "prettier": "2.7.1",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-vue": "^9.4.0",
-    "@babel/eslint-parser": "^7.18.9"
-  }
+    "name": "primevue",
+    "version": "3.21.0",
+    "homepage": "https://www.primefaces.org/primevue",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/primefaces/primevue.git"
+    },
+    "license": "MIT",
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "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 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}\"",
+        "test:unit": "vitest",
+        "test:build": "NODE_ENV=production rollup -c"
+    },
+    "devDependencies": {
+        "@fullcalendar/core": "^5.11.0",
+        "@fullcalendar/daygrid": "^5.11.0",
+        "@fullcalendar/interaction": "^5.11.0",
+        "@fullcalendar/timegrid": "^5.11.0",
+        "@fullcalendar/vue3": "^5.11.0",
+        "@vitejs/plugin-vue-jsx": "^2.0.1",
+        "@vue/test-utils": "^2.0.0",
+        "@vuelidate/core": "^2.0.0-alpha.14",
+        "@vuelidate/validators": "^2.0.0-alpha.12",
+        "chart.js": "3.3.2",
+        "gulp": "^4.0.2",
+        "gulp-concat": "^2.6.0",
+        "gulp-flatten": "^0.4.0",
+        "gulp-rename": "^2.0.0",
+        "gulp-uglify": "^3.0.2",
+        "gulp-uglifycss": "^1.0.6",
+        "jsdom": "^19.0.0",
+        "nuxt": "^3.0.0",
+        "primeflex": "^3.3.0",
+        "primeicons": "^6.0.1",
+        "quill": "^1.3.7",
+        "rollup-plugin-postcss": "^4.0.0",
+        "rollup-plugin-terser": "^7.0.2",
+        "rollup-plugin-vue": "^6.0.0-beta.9",
+        "sass": "^1.45.0",
+        "sass-loader": "^8.0.2",
+        "vitest": "^0.23.2",
+        "prettier": "2.7.1",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-vue": "^9.4.0",
+        "@babel/eslint-parser": "^7.18.9"
+    }
 }

pages/accordion/AccordionDoc.vue

@@ -1,24 +1,23 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="AccordionDemo" :sources="sources" github="accordion/AccordionDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="AccordionDemo" :sources="sources" github="accordion/AccordionDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/accordion/accordion.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/accordiontab/accordiontab.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.</p>
+        <pre v-code><code>
 &lt;Accordion&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -33,9 +32,9 @@ import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-            <h5>Active</h5>
-            <p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
-            <pre v-code><code>
+        <h5>Active</h5>
+        <p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
+        <pre v-code><code>
 &lt;Accordion :activeIndex="0"&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -50,8 +49,8 @@ import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-            <p>Two-way binding requires v-model.</p>
-            <pre v-code><code>
+        <p>Two-way binding requires v-model.</p>
+        <pre v-code><code>
 &lt;Accordion v-model:activeIndex="activeIndex"&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -66,9 +65,9 @@ import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-            <h5>Multiple</h5>
-            <p>By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple tabs be active at the same time.</p>
-            <pre v-code><code>
+        <h5>Multiple</h5>
+        <p>By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple tabs be active at the same time.</p>
+        <pre v-code><code>
 &lt;Accordion :multiple="true"&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -83,9 +82,9 @@ import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-            <h5>Disabled</h5>
-            <p>A tab can be disabled by setting the <i>disabled</i> property to true.</p>
-            <pre v-code><code>
+        <h5>Disabled</h5>
+        <p>A tab can be disabled by setting the <i>disabled</i> property to true.</p>
+        <pre v-code><code>
 &lt;Accordion&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -100,9 +99,9 @@ import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-            <h5>Custom Content at Headers</h5>
-            <p>Custom content for the title section of a panel is defined using the header template.</p>
-            <pre v-code><code>
+        <h5>Custom Content at Headers</h5>
+        <p>Custom content for the title section of a panel is defined using the header template.</p>
+        <pre v-code><code>
 &lt;Accordion&gt;
 	&lt;AccordionTab&gt;
 		&lt;template #header&gt;
@@ -129,9 +128,9 @@ import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-            <h5>Programmatic Control</h5>
-            <p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
-            <pre v-code><code>
+        <h5>Programmatic Control</h5>
+        <p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
+        <pre v-code><code>
 &lt;Button @click="active = 0" class="p-button-text" label="Activate 1st" /&gt;
 &lt;Button @click="active = 1" class="p-button-text" label="Activate 2nd" /&gt;
 &lt;Button @click="active = 2" class="p-button-text" label="Activate 3rd" /&gt;
@@ -150,7 +149,7 @@ import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -161,18 +160,18 @@ export default {
 
 </code></pre>
 
-            <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>
+        <h5>Dynamic Tabs</h5>
+        <p>Tabs can be generated dynamically using the standard <i>v-for</i> directive.</p>
+        <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>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -187,13 +186,13 @@ export default {
 
 </code></pre>
 
-            <h5>Lazy Rendering</h5>
-            <p>
-                All tabs are rendered when mounted and inactive tabs are hidden with CSS. Enabling <i>lazy</i> option activates the dynamic mode where a tab is only rendered at DOM when it is active. This option is useful to speed up the initial
-                rendering performance if there are many tabs.
-            </p>
+        <h5>Lazy Rendering</h5>
+        <p>
+            All tabs are rendered when mounted and inactive tabs are hidden with CSS. Enabling <i>lazy</i> option activates the dynamic mode where a tab is only rendered at DOM when it is active. This option is useful to speed up the initial
+            rendering performance if there are many tabs.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Accordion lazy&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -208,273 +207,272 @@ export default {
 
 </code></pre>
 
-            <h5>Properties of AccordionTab</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Orientation of tab headers.</td>
-                        </tr>
-                        <tr>
-                            <td>headerStyle</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>headerClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>headerProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLDivElement to the tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>headerActionProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>contentStyle</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the tab content.</td>
-                        </tr>
-                        <tr>
-                            <td>contentClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the tab content.</td>
-                        </tr>
-                        <tr>
-                            <td>contentProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLDivElement to the tab content.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the tab is disabled.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties of AccordionTab</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Orientation of tab headers.</td>
+                    </tr>
+                    <tr>
+                        <td>headerStyle</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Inline style of the tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>headerClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>headerProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLDivElement to the tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>headerActionProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>contentStyle</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Inline style of the tab content.</td>
+                    </tr>
+                    <tr>
+                        <td>contentClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the tab content.</td>
+                    </tr>
+                    <tr>
+                        <td>contentProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLDivElement to the tab content.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the tab is disabled.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Properties of Accordion</h5>
-            <p>Any property as style and class are passed to the main container element. Following is the additional property to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>multiple</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, multiple tabs can be activated at the same time.</td>
-                        </tr>
-                        <tr>
-                            <td>activeIndex</td>
-                            <td>number|array</td>
-                            <td>null</td>
-                            <td>Index of the active tab or an array of indexes in multiple mode.</td>
-                        </tr>
-                        <tr>
-                            <td>lazy</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.</td>
-                        </tr>
-                        <tr>
-                            <td>expandIcon</td>
-                            <td>string</td>
-                            <td>pi-chevron-right</td>
-                            <td>Icon of a collapsed tab.</td>
-                        </tr>
-                        <tr>
-                            <td>collapseIcon</td>
-                            <td>string</td>
-                            <td>pi-chevron-down</td>
-                            <td>Icon of an expanded tab.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>selectOnFocus</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, the focused tab is activated.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties of Accordion</h5>
+        <p>Any property as style and class are passed to the main container element. Following is the additional property to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>multiple</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, multiple tabs can be activated at the same time.</td>
+                    </tr>
+                    <tr>
+                        <td>activeIndex</td>
+                        <td>number|array</td>
+                        <td>null</td>
+                        <td>Index of the active tab or an array of indexes in multiple mode.</td>
+                    </tr>
+                    <tr>
+                        <td>lazy</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.</td>
+                    </tr>
+                    <tr>
+                        <td>expandIcon</td>
+                        <td>string</td>
+                        <td>pi-chevron-right</td>
+                        <td>Icon of a collapsed tab.</td>
+                    </tr>
+                    <tr>
+                        <td>collapseIcon</td>
+                        <td>string</td>
+                        <td>pi-chevron-down</td>
+                        <td>Icon of an expanded tab.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>selectOnFocus</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, the focused tab is activated.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>tab-open</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.index: Opened tab index
-                            </td>
-                            <td>Callback to invoke when a tab gets expanded.</td>
-                        </tr>
-                        <tr>
-                            <td>tab-close</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.index: Closed tab index
-                            </td>
-                            <td>Callback to invoke when an active tab is collapsed by clicking on the header.</td>
-                        </tr>
-                        <tr>
-                            <td>tab-click</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.index: Index of the clicked tab
-                            </td>
-                            <td>Callback to invoke when an active tab is clicked.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>tab-open</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.index: Opened tab index
+                        </td>
+                        <td>Callback to invoke when a tab gets expanded.</td>
+                    </tr>
+                    <tr>
+                        <td>tab-close</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.index: Closed tab index
+                        </td>
+                        <td>Callback to invoke when an active tab is collapsed by clicking on the header.</td>
+                    </tr>
+                    <tr>
+                        <td>tab-click</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.index: Index of the clicked tab
+                        </td>
+                        <td>Callback to invoke when an active tab is clicked.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-accordion</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-accordion-header</td>
-                            <td>Header of a tab.</td>
-                        </tr>
-                        <tr>
-                            <td>p-accordion-content</td>
-                            <td>Container of a tab.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-accordion</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-accordion-header</td>
+                        <td>Header of a tab.</td>
+                    </tr>
+                    <tr>
+                        <td>p-accordion-content</td>
+                        <td>Container of a tab.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <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.
-            </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>
+        <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.
+        </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>
 
-            <h6>Header Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <i>tab</i>
-                            </td>
-                            <td>Moves focus to the next focusable element in the page tab sequence.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>tab</i></td>
-                            <td>Moves focus to the previous focusable element in the page tab sequence.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>enter</i>
-                            </td>
-                            <td>Toggles the visibility of the content.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>space</i>
-                            </td>
-                            <td>Toggles the visibility of the content.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>down arrow</i>
-                            </td>
-                            <td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>up arrow</i>
-                            </td>
-                            <td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>home</i>
-                            </td>
-                            <td>Moves focus to the first header.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>end</i>
-                            </td>
-                            <td>Moves focus to the last header.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Header Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last header.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/avatar/AvatarDoc.vue

@@ -1,40 +1,39 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Avatar from 'primevue/avatar';
 import AvatarGroup from 'primevue/avatargroup';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/avatar/avatar.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/avatargroup/avatargroup.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
+        <pre v-code><code>
 &lt;Avatar label="P" /&gt;
 &lt;Avatar icon="pi pi-search" /&gt;
 &lt;Avatar image="user.png" /&gt;
 
 </code></pre>
 
-            <h5>Sizes</h5>
-            <p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
-            <pre v-code><code>
+        <h5>Sizes</h5>
+        <p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
+        <pre v-code><code>
 &lt;Avatar label="P" size="large"/&gt;
 
 </code></pre>
 
-            <h5>AvatarGroup</h5>
-            <p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
-            <pre v-code><code>
+        <h5>AvatarGroup</h5>
+        <p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
+        <pre v-code><code>
 &lt;AvatarGroup&gt;
 	&lt;Avatar label="P" /&gt;
 	&lt;Avatar icon="pi pi-search" /&gt;
@@ -44,186 +43,185 @@ import AvatarGroup from 'primevue/avatargroup';
 
 </code></pre>
 
-            <h5>Shape</h5>
-            <p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p>
-            <pre v-code><code>
+        <h5>Shape</h5>
+        <p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p>
+        <pre v-code><code>
 &lt;Avatar label="P" shape="circle"/&gt;
 
 </code></pre>
 
-            <h5>Badge</h5>
-            <p>A badge can be added to an Avatar with the <router-link to="/badge">Badge</router-link> directive.</p>
-            <pre v-code><code>
+        <h5>Badge</h5>
+        <p>A badge can be added to an Avatar with the <router-link to="/badge">Badge</router-link> directive.</p>
+        <pre v-code><code>
 &lt;Avatar image="user.png" size="xlarge" v-badge.danger="4" /&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
-            <pre v-code><code>
+        <h5>Templating</h5>
+        <p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
+        <pre v-code><code>
 &lt;Avatar&gt;
     Content
 &lt;/Avatar&gt;
 
 </code></pre>
 
-            <h5>Properties of Avatar</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the text to display.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the icon to display.</td>
-                        </tr>
-                        <tr>
-                            <td>image</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the image to display.</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Size of the element, valid options are "large" and "xlarge".</td>
-                        </tr>
-                        <tr>
-                            <td>shape</td>
-                            <td>string</td>
-                            <td>square</td>
-                            <td>Shape of the element, valid options are "square" and "circle".</td>
-                        </tr>
-                        <tr>
-                            <td>aria-label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines a string value that labels an interactive element.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-labelledby</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties of Avatar</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines the text to display.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines the icon to display.</td>
+                    </tr>
+                    <tr>
+                        <td>image</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines the image to display.</td>
+                    </tr>
+                    <tr>
+                        <td>size</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Size of the element, valid options are "large" and "xlarge".</td>
+                    </tr>
+                    <tr>
+                        <td>shape</td>
+                        <td>string</td>
+                        <td>square</td>
+                        <td>Shape of the element, valid options are "square" and "circle".</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Properties of AvatarGroup</h5>
-            <p>Any property as style and class are passed to the main container element. There are no additional properties.</p>
+        <h5>Properties of AvatarGroup</h5>
+        <p>Any property as style and class are passed to the main container element. There are no additional properties.</p>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>error</td>
-                            <td>-</td>
-                            <td>Triggered when an error occurs while loading an image file.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>error</td>
+                        <td>-</td>
+                        <td>Triggered when an error occurs while loading an image file.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling of Avatar</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-avatar</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-avatar-image</td>
-                            <td>Container element in image mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-avatar-circle</td>
-                            <td>Container element with a circle shape.</td>
-                        </tr>
-                        <tr>
-                            <td>p-avatar-text</td>
-                            <td>Text of the Avatar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-avatar-icon</td>
-                            <td>Icon of the Avatar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-avatar-lg</td>
-                            <td>Container element with a large size.</td>
-                        </tr>
-                        <tr>
-                            <td>p-avatar-xl</td>
-                            <td>Container element with an xlarge size.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling of Avatar</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-avatar</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-avatar-image</td>
+                        <td>Container element in image mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-avatar-circle</td>
+                        <td>Container element with a circle shape.</td>
+                    </tr>
+                    <tr>
+                        <td>p-avatar-text</td>
+                        <td>Text of the Avatar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-avatar-icon</td>
+                        <td>Icon of the Avatar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-avatar-lg</td>
+                        <td>Container element with a large size.</td>
+                    </tr>
+                    <tr>
+                        <td>p-avatar-xl</td>
+                        <td>Container element with an xlarge size.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling of AvatarGroup</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-avatar-group</td>
-                            <td>Container element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling of AvatarGroup</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-avatar-group</td>
+                        <td>Container element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like <i>img</i> along with <i>aria-labelledby</i> or <i>aria-label</i> to describe the component. In case
-                avatars need to be tabbable, <i>tabindex</i> can be added as well to implement custom key handlers.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like <i>img</i> along with <i>aria-labelledby</i> or <i>aria-label</i> to describe the component. In case
+            avatars need to be tabbable, <i>tabindex</i> can be added as well to implement custom key handlers.
+        </p>
 
-            <h5>Keyboard Support</h5>
-            <p>Component does not include any interactive elements.</p>
+        <h5>Keyboard Support</h5>
+        <p>Component does not include any interactive elements.</p>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/badge/BadgeDoc.vue

@@ -1,208 +1,206 @@
 <template>
-    <ClientOnly
-        ><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>
+    <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>
 
-            <h5>Component</h5>
-            <h6>Import via Module</h6>
-            <pre v-code.script><code>
+        <h5>Component</h5>
+        <h6>Import via Module</h6>
+        <pre v-code.script><code>
 import Badge from 'primevue/badge';
 
 </code></pre>
 
-            <h6>Import via CDN</h6>
-            <pre v-code><code>
+        <h6>Import via CDN</h6>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/badge/badge.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <p>Content of the badge is specified using the <i>value</i> property.</p>
-            <pre v-code><code>
+        <p>Content of the badge is specified using the <i>value</i> property.</p>
+        <pre v-code><code>
 &lt;Badge value="2"&gt;&lt;/Badge&gt;
 
 </code></pre>
 
-            <h5>Directive</h5>
-            <h6>Import via Module</h6>
-            <pre v-code.script><code>
+        <h5>Directive</h5>
+        <h6>Import via Module</h6>
+        <pre v-code.script><code>
 import BadgeDirective from 'primevue/badgedirective';
 
 </code></pre>
 
-            <h6>Import via CDN</h6>
-            <pre v-code><code>
+        <h6>Import via CDN</h6>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <p>When used as a directive, badge needs to be configured at the application with a name of your choice.</p>
-            <pre v-code.script><code>
+        <p>When used as a directive, badge needs to be configured at the application with a name of your choice.</p>
+        <pre v-code.script><code>
 import BadgeDirective from 'primevue/badgedirective';
 
 app.directive('badge', BadgeDirective);
 
 </code></pre>
 
-            <p>Next step is attaching it to an element.</p>
-            <pre v-code><code>
+        <p>Next step is attaching it to an element.</p>
+        <pre v-code><code>
 &lt;i class="pi pi-bell" v-badge="2"&gt;&lt;/i&gt;
 
 </code></pre>
 
-            <h5>Severities</h5>
-            <p>Different color options are available as severity levels. When used as a component use the <i>severity</i> property to apply a severity and use a <i>modifier</i> as the severity value in directive mode.</p>
+        <h5>Severities</h5>
+        <p>Different color options are available as severity levels. When used as a component use the <i>severity</i> property to apply a severity and use a <i>modifier</i> as the severity value in directive mode.</p>
 
-            <ul>
-                <li>success</li>
-                <li>info</li>
-                <li>warning</li>
-                <li>danger</li>
-            </ul>
+        <ul>
+            <li>success</li>
+            <li>info</li>
+            <li>warning</li>
+            <li>danger</li>
+        </ul>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Badge value="2" severity="success"&gt;&lt;/Badge&gt;
 
 &lt;i class="pi pi-bell" v-badge.success="2"&gt;&lt;/i&gt;
 
 </code></pre>
 
-            <h5>Button Badges</h5>
-            <p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
+        <h5>Button Badges</h5>
+        <p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Button type="button" label="Emails" badge="8" /&gt;
 &lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt;
 
 </code></pre>
 
-            <h5>Sizes</h5>
-            <p>Badge sizes are adjusted with the <i>size</i> property that accepts "large" and "xlarge" as the possible alternatives to the default size. Currently sizes only apply to component mode.</p>
-            <pre v-code><code>
+        <h5>Sizes</h5>
+        <p>Badge sizes are adjusted with the <i>size</i> property that accepts "large" and "xlarge" as the possible alternatives to the default size. Currently sizes only apply to component mode.</p>
+        <pre v-code><code>
 &lt;Badge value="2"&gt;&lt;/Badge&gt;
 &lt;Badge value="4" size="large" severity="warning"&gt;&lt;/Badge&gt;
 &lt;Badge value="6" size="xlarge" severity="success"&gt;&lt;/Badge&gt;
 
 </code></pre>
 
-            <p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
-            <pre v-code><code>
+        <p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
+        <pre v-code><code>
 &lt;h1&gt;Heading 1 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h1&gt;
 &lt;h2&gt;Heading 2 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h2&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>Content can easily be customized with the default slot instead of using the built-in display.</p>
-            <pre v-code><code>
+        <h5>Templating</h5>
+        <p>Content can easily be customized with the default slot instead of using the built-in display.</p>
+        <pre v-code><code>
 &lt;Badge&gt;
    Content
 &lt;/Badge&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value to display inside the badge.</td>
-                        </tr>
-                        <tr>
-                            <td>severity</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Severity type of the badge.</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Size of the badge, valid options are "large" and "xlarge".</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value to display inside the badge.</td>
+                    </tr>
+                    <tr>
+                        <td>severity</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Severity type of the badge.</td>
+                    </tr>
+                    <tr>
+                        <td>size</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Size of the badge, valid options are "large" and "xlarge".</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-badge</td>
-                            <td>Badge element</td>
-                        </tr>
-                        <tr>
-                            <td>p-overlay-badge</td>
-                            <td>Wrapper of a badge and its target.</td>
-                        </tr>
-                        <tr>
-                            <td>p-badge-dot</td>
-                            <td>Badge element with no value.</td>
-                        </tr>
-                        <tr>
-                            <td>p-badge-success</td>
-                            <td>Badge element with success severity.</td>
-                        </tr>
-                        <tr>
-                            <td>p-badge-info</td>
-                            <td>Badge element with info severity.</td>
-                        </tr>
-                        <tr>
-                            <td>p-badge-warning</td>
-                            <td>Badge element with warning severity.</td>
-                        </tr>
-                        <tr>
-                            <td>p-badge-danger</td>
-                            <td>Badge element with danger severity.</td>
-                        </tr>
-                        <tr>
-                            <td>p-badge-lg</td>
-                            <td>Large badge element</td>
-                        </tr>
-                        <tr>
-                            <td>p-badge-xl</td>
-                            <td>Extra large badge element</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-badge</td>
+                        <td>Badge element</td>
+                    </tr>
+                    <tr>
+                        <td>p-overlay-badge</td>
+                        <td>Wrapper of a badge and its target.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-dot</td>
+                        <td>Badge element with no value.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-success</td>
+                        <td>Badge element with success severity.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-info</td>
+                        <td>Badge element with info severity.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-warning</td>
+                        <td>Badge element with warning severity.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-danger</td>
+                        <td>Badge element with danger severity.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-lg</td>
+                        <td>Large badge element</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-xl</td>
+                        <td>Extra large badge element</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic,
-                <i>aria-live</i> may be utilized as well. In case badges need to be tabbable, <i>tabindex</i> can be added to implement custom key handlers.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic,
+            <i>aria-live</i> may be utilized as well. In case badges need to be tabbable, <i>tabindex</i> can be added to implement custom key handlers.
+        </p>
 
-            <h5>Keyboard Support</h5>
-            <p>Component does not include any interactive elements.</p>
+        <h5>Keyboard Support</h5>
+        <p>Component does not include any interactive elements.</p>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/blockui/BlockUIDoc.vue

@@ -1,25 +1,24 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import BlockUI from 'primevue/blockui';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/blockui/blockui.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <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.
-            </p>
-            <pre v-code><code>
+        <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.
+        </p>
+        <pre v-code><code>
 &lt;BlockUI :blocked="blockedPanel"&gt;
     &lt;Panel header="Header"&gt;
         Panel Content
@@ -28,7 +27,7 @@ import BlockUI from 'primevue/blockui';
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -47,117 +46,115 @@ export default {
 
 </code></pre>
 
-            <h5>Full Screen</h5>
-            <p>In full screen mode, instead of a particular element, the whole document gets blocked. Set <i>fullScreen</i> as true in order to enable this functionality.</p>
+        <h5>Full Screen</h5>
+        <p>In full screen mode, instead of a particular element, the whole document gets blocked. Set <i>fullScreen</i> as true in order to enable this functionality.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>blocked</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Controls the blocked state.</td>
-                        </tr>
-                        <tr>
-                            <td>fullscreen</td>
-                            <td>menuitem</td>
-                            <td>null</td>
-                            <td>When enabled, the whole document gets blocked.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>autoZIndex</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to automatically manage layering.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>blocked</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Controls the blocked state.</td>
+                    </tr>
+                    <tr>
+                        <td>fullscreen</td>
+                        <td>menuitem</td>
+                        <td>null</td>
+                        <td>When enabled, the whole document gets blocked.</td>
+                    </tr>
+                    <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>block</td>
-                            <td>-</td>
-                            <td>Fired when the element gets blocked.</td>
-                        </tr>
-                        <tr>
-                            <td>unblock</td>
-                            <td>-</td>
-                            <td>Fired when the element gets unblocked.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>block</td>
+                        <td>-</td>
+                        <td>Fired when the element gets blocked.</td>
+                    </tr>
+                    <tr>
+                        <td>unblock</td>
+                        <td>-</td>
+                        <td>Fired when the element gets unblocked.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-blockui</td>
-                            <td>Mask element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-blockui-document</td>
-                            <td>Mask element in full screen mode.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-blockui</td>
+                        <td>Mask element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-blockui-document</td>
+                        <td>Mask element in full screen mode.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <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.
-            </p>
+        <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.
+        </p>
 
-            <h5>Keyboard Support</h5>
-            <p>Component does not include any interactive elements.</p>
+        <h5>Keyboard Support</h5>
+        <p>Component does not include any interactive elements.</p>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/breadcrumb/BreadcrumbDoc.vue

@@ -1,30 +1,29 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Breadcrumb from 'primevue/breadcrumb';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/breadcrumb/breadcrumb.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>MenuModel</h5>
-            <p>Breadcrumb uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
+        <h5>MenuModel</h5>
+        <p>Breadcrumb uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
 
-            <h5>Getting Started</h5>
-            <p>Breadcrumb requires a collection of menuitems as its model and a home item.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Breadcrumb requires a collection of menuitems as its model and a home item.</p>
+        <pre v-code><code>
 &lt;Breadcrumb :home="home" :model="items" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -42,154 +41,153 @@ export default {
 
 </code></pre>
 
-            <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>
+        <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>
 &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>
+        <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
+        <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>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>model</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of menuitems.</td>
-                        </tr>
-                        <tr>
-                            <td>home</td>
-                            <td>menuitem</td>
-                            <td>null</td>
-                            <td>Configuration for the home icon.</td>
-                        </tr>
-                        <tr>
-                            <td>exact</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines a string value that labels an interactive element.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-labelledby</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>model</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of menuitems.</td>
+                    </tr>
+                    <tr>
+                        <td>home</td>
+                        <td>menuitem</td>
+                        <td>null</td>
+                        <td>Configuration for the home icon.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>item</td>
-                            <td>item: Menuitem instance</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>item: Menuitem instance</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-breadcrumb</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-breadcrumb-list</td>
-                            <td>Ordered list element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-breadcrumb-home</td>
-                            <td>First list element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem</td>
-                            <td>Menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-link</td>
-                            <td>Link element of the menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-text</td>
-                            <td>Label of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-icon</td>
-                            <td>Icon of a menuitem.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-breadcrumb</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-breadcrumb-list</td>
+                        <td>Ordered list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-breadcrumb-home</td>
+                        <td>First list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem</td>
+                        <td>Menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-link</td>
+                        <td>Link element of the menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-text</td>
+                        <td>Label of a menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-icon</td>
+                        <td>Icon of a menuitem.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
+        <h5>Dependencies</h5>
+        <p>None.</p>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Breadcrumb uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the list item
-                separators have <i>aria-hidden</i> to be able to ignored by the screen readers. If the last link represents the current route, <i>aria-current</i> is added with "page" as the value.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Breadcrumb uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the list item
+            separators have <i>aria-hidden</i> to be able to ignored by the screen readers. If the last link represents the current route, <i>aria-current</i> is added with "page" as the value.
+        </p>
 
-            <h6>Keyboard Support</h6>
-            <p>No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.</p>
+        <h6>Keyboard Support</h6>
+        <p>No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.</p>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/button/ButtonDoc.vue

@@ -1,58 +1,57 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Button from 'primevue/button';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Button is created using the Button element.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Button is created using the Button element.</p>
+        <pre v-code><code>
 &lt;Button /&gt;
 
 </code></pre>
 
-            <h5>Label</h5>
-            <p>Text of the button is defined using the <i>label</i> property.</p>
-            <pre v-code><code>
+        <h5>Label</h5>
+        <p>Text of the button is defined using the <i>label</i> property.</p>
+        <pre v-code><code>
 &lt;Button label="Submit" /&gt;
 
 </code></pre>
-            <h5>Icons</h5>
-            <p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default icon position is "left" and alternative is "right". To display only an icon, leave the label as undefined.</p>
-            <pre v-code><code>
+        <h5>Icons</h5>
+        <p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default icon position is "left" and alternative is "right". To display only an icon, leave the label as undefined.</p>
+        <pre v-code><code>
 &lt;Button label="Submit" icon="pi pi-check" iconPos="right" /&gt;
 
 </code></pre>
 
-            <h5>Events</h5>
-            <p>Events are defined with the standard notation.</p>
-            <pre v-code><code>
+        <h5>Events</h5>
+        <p>Events are defined with the standard notation.</p>
+        <pre v-code><code>
 &lt;Button label="Submit" @click="handleClick($event)"/&gt;
 
 </code></pre>
 
-            <h5>Severity</h5>
-            <p>Different options are available as severity levels.</p>
+        <h5>Severity</h5>
+        <p>Different options are available as severity levels.</p>
 
-            <ul>
-                <li>.p-button-secondary</li>
-                <li>.p-button-success</li>
-                <li>.p-button-info</li>
-                <li>.p-button-warning</li>
-                <li>.p-button-help</li>
-                <li>.p-button-danger</li>
-            </ul>
+        <ul>
+            <li>.p-button-secondary</li>
+            <li>.p-button-success</li>
+            <li>.p-button-info</li>
+            <li>.p-button-warning</li>
+            <li>.p-button-help</li>
+            <li>.p-button-danger</li>
+        </ul>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Button label="Primary" /&gt;
 &lt;Button label="Secondary" class="p-button-secondary" /&gt;
 &lt;Button label="Success" class="p-button-success" /&gt;
@@ -63,9 +62,9 @@ import Button from 'primevue/button';
 
 </code></pre>
 
-            <h5>Text Buttons</h5>
-            <p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling. In addition when used with <i>.p-button-plain</i> text buttons ignore severity levels and displayed as a regular text.</p>
-            <pre v-code><code>
+        <h5>Text Buttons</h5>
+        <p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling. In addition when used with <i>.p-button-plain</i> text buttons ignore severity levels and displayed as a regular text.</p>
+        <pre v-code><code>
 &lt;Button label="Submit" class="p-button-text" /&gt;
 &lt;Button icon="pi pi-check" class="p-button-text" /&gt;
 &lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" /&gt;
@@ -73,39 +72,39 @@ import Button from 'primevue/button';
 
 </code></pre>
 
-            <h5>Raised and Rounded Buttons</h5>
-            <p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
-            <pre v-code><code>
+        <h5>Raised and Rounded Buttons</h5>
+        <p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
+        <pre v-code><code>
 &lt;Button label="Primary" class="p-button-raised p-button-rounded" /&gt;
 
 </code></pre>
 
-            <h5>Outlined Buttons</h5>
-            <p>An alternate styling for a button is the outlined option where background becomes transparent. Apply "p-button-outlined" to style a button as outlined.</p>
-            <pre v-code><code>
+        <h5>Outlined Buttons</h5>
+        <p>An alternate styling for a button is the outlined option where background becomes transparent. Apply "p-button-outlined" to style a button as outlined.</p>
+        <pre v-code><code>
 &lt;Button label="Primary" class="p-button-outlined" /&gt;
 
 </code></pre>
 
-            <h5>Link Buttons</h5>
-            <p>Use "p-button-link" class to render the button as a link.</p>
-            <pre v-code><code>
+        <h5>Link Buttons</h5>
+        <p>Use "p-button-link" class to render the button as a link.</p>
+        <pre v-code><code>
 &lt;Button label="Link" class="p-button-link" /&gt;
 
 </code></pre>
 
-            <h5>Badges</h5>
-            <p>Badge is a small status indicator for a button. Refer to the <router-link to="/badge">badge</router-link> documentation for available styling options.</p>
+        <h5>Badges</h5>
+        <p>Badge is a small status indicator for a button. Refer to the <router-link to="/badge">badge</router-link> documentation for available styling options.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Button type="button" label="Emails" badge="8" /&gt;
 &lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-info" /&gt;
 
 </code></pre>
 
-            <h5>ButtonSet</h5>
-            <p>Wrapping the buttons in a container having a <i>.p-buttonset</i> class, groups the buttons side to side.</p>
-            <pre v-code><code>
+        <h5>ButtonSet</h5>
+        <p>Wrapping the buttons in a container having a <i>.p-buttonset</i> class, groups the buttons side to side.</p>
+        <pre v-code><code>
 &lt;span class="p-buttonset"&gt;
     &lt;Button label="Save" icon="pi pi-check" /&gt;
     &lt;Button label="Delete" icon="pi pi-trash" /&gt;
@@ -114,28 +113,28 @@ import Button from 'primevue/button';
 
 </code></pre>
 
-            <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.
-            </p>
-            <pre v-code><code>
+        <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.
+        </p>
+        <pre v-code><code>
 &lt;Button label="Small" icon="pi pi-check" class="p-button-sm"  /&gt;
 &lt;Button label="Normal" icon="pi pi-check" class="p-button"  /&gt;
 &lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt;
 
 </code></pre>
 
-            <h5>Loading State</h5>
-            <p>Button displays a <i>loadingIcon</i> when <i>loading</i> property is enabled.</p>
-            <pre v-code><code>
+        <h5>Loading State</h5>
+        <p>Button displays a <i>loadingIcon</i> when <i>loading</i> property is enabled.</p>
+        <pre v-code><code>
 &lt;Button label="Save" icon="pi pi-check" :loading="isLoading" /&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
-            <pre v-code><code>
+        <h5>Templating</h5>
+        <p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
+        <pre v-code><code>
 &lt;Button type="button" class="px-3"&gt;
     &lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem"/&gt;
 &lt;/Button&gt;
@@ -147,114 +146,114 @@ import Button from 'primevue/button';
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property such as style and class are passed to the underlying button element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Text of the button.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the icon.</td>
-                        </tr>
-                        <tr>
-                            <td>iconPos</td>
-                            <td>string</td>
-                            <td>left</td>
-                            <td>Position of the icon, valid values are "left", "right", "bottom" and "top".</td>
-                        </tr>
-                        <tr>
-                            <td>iconClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the icon.</td>
-                        </tr>
-                        <tr>
-                            <td>badge</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Value of the badge.</td>
-                        </tr>
-                        <tr>
-                            <td>badgeClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the badge.</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the button is in loading state.</td>
-                        </tr>
-                        <tr>
-                            <td>loadingIcon</td>
-                            <td>string</td>
-                            <td>pi pi-spinner pi-spin</td>
-                            <td>Icon to display in loading state.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property such as style and class are passed to the underlying button element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Text of the button.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the icon.</td>
+                    </tr>
+                    <tr>
+                        <td>iconPos</td>
+                        <td>string</td>
+                        <td>left</td>
+                        <td>Position of the icon, valid values are "left", "right", "bottom" and "top".</td>
+                    </tr>
+                    <tr>
+                        <td>iconClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the icon.</td>
+                    </tr>
+                    <tr>
+                        <td>badge</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Value of the badge.</td>
+                    </tr>
+                    <tr>
+                        <td>badgeClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the badge.</td>
+                    </tr>
+                    <tr>
+                        <td>loading</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the button is in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>loadingIcon</td>
+                        <td>string</td>
+                        <td>pi pi-spinner pi-spin</td>
+                        <td>Icon to display in loading state.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-button</td>
-                            <td>Button element</td>
-                        </tr>
-                        <tr>
-                            <td>p-button-icon</td>
-                            <td>Icon element</td>
-                        </tr>
-                        <tr>
-                            <td>p-button-label</td>
-                            <td>Label element of the button</td>
-                        </tr>
-                        <tr>
-                            <td>p-button-sm</td>
-                            <td>Smaller button element</td>
-                        </tr>
-                        <tr>
-                            <td>p-button-lg</td>
-                            <td>Larger button element</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-button</td>
+                        <td>Button element</td>
+                    </tr>
+                    <tr>
+                        <td>p-button-icon</td>
+                        <td>Icon element</td>
+                    </tr>
+                    <tr>
+                        <td>p-button-label</td>
+                        <td>Label element of the button</td>
+                    </tr>
+                    <tr>
+                        <td>p-button-sm</td>
+                        <td>Smaller button element</td>
+                    </tr>
+                    <tr>
+                        <td>p-button-lg</td>
+                        <td>Larger button element</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the <i>aria-label</i> prop, if not present <i>label</i> prop is used as the value. If the button is
-                icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the <i>aria-label</i> prop, if not present <i>label</i> prop is used as the value. If the button is
+            icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Button icon="pi pi-check" aria-label="Submit" /&gt;
 
 &lt;Button icon="pi pi-check" label="Submit" /&gt;
@@ -266,36 +265,35 @@ import Button from 'primevue/button';
 
 </code></pre>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the button.</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Activates the button.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Activates the button.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the button.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Activates the button.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Activates the button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/card/CardDoc.vue

@@ -1,22 +1,21 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Card from 'primevue/card';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/card/card.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
+        <pre v-code><code>
 &lt;Card&gt;
     &lt;template #header&gt;
         &lt;img alt="user header" src="/demo/images/usercard.png"&gt;
@@ -36,97 +35,96 @@ import Card from 'primevue/card';
 
 </code></pre>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>subtitle</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>title</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>subtitle</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>content</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-card</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-card-title</td>
-                            <td>Title element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-card-subtitle</td>
-                            <td>Subtitle element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-card-content</td>
-                            <td>Content of the card.</td>
-                        </tr>
-                        <tr>
-                            <td>p-card-footer</td>
-                            <td>Footer of the card.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-card</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-card-title</td>
+                        <td>Title element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-card-subtitle</td>
+                        <td>Subtitle element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-card-content</td>
+                        <td>Content of the card.</td>
+                    </tr>
+                    <tr>
+                        <td>p-card-footer</td>
+                        <td>Footer of the card.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
+        <h5>Accessibility</h5>
 
-            <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.
-            </p>
+        <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.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Card role="region"&gt;
     Content
 &lt;/Card&gt;
 
 </code></pre>
 
-            <h5>Keyboard Support</h5>
-            <p>Component does not include any interactive elements.</p>
+        <h5>Keyboard Support</h5>
+        <p>Component does not include any interactive elements.</p>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/carousel/CarouselDoc.vue

@@ -1,22 +1,21 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="carousel/CarouselDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <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';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/carousel/carousel.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Carousel requires a collection of items as its value along with a template to render each item.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Carousel requires a collection of items as its value along with a template to render each item.</p>
+        <pre v-code><code>
 &lt;Carousel :value="cars"&gt;
     &lt;template #item="slotProps"&gt;
 	&lt;/template&gt;
@@ -24,9 +23,9 @@ import Carousel from 'primevue/carousel';
 
 </code></pre>
 
-            <h5>Items per page and Scroll Items</h5>
-            <p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p>
-            <pre v-code><code>
+        <h5>Items per page and Scroll Items</h5>
+        <p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p>
+        <pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="3" :numScroll="1"&gt;
 	&lt;template #item="slotProps"&gt;
 	&lt;/template&gt;
@@ -34,9 +33,9 @@ import Carousel from 'primevue/carousel';
 
 </code></pre>
 
-            <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>
+        <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>
 &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,9 +60,9 @@ import Carousel from 'primevue/carousel';
         &lt;/div&gt;
 	&lt;/template&gt;
 &lt;/Carousel&gt;
-</template>
+
 </code></pre>
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 data() {
 	return {
 		responsiveOptions: [
@@ -88,10 +87,10 @@ data() {
 
 </code></pre>
 
-            <h5>Header and Footer</h5>
-            <p>Custom content projection is available using the <i>item</i>, <i>header</i> and <i>footer</i> templates.</p>
+        <h5>Header and Footer</h5>
+        <p>Custom content projection is available using the <i>item</i>, <i>header</i> and <i>footer</i> templates.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions"&gt;
 	&lt;template #header&gt;
 		&lt;h2&gt;Custom Header&lt;/h2&gt;
@@ -106,9 +105,9 @@ data() {
 
 </code></pre>
 
-            <h5>Orientation</h5>
-            <p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p>
-            <pre v-code><code>
+        <h5>Orientation</h5>
+        <p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p>
+        <pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions"&gt;
 	&lt;template #item="slotProps"&gt;
 		Content
@@ -117,11 +116,9 @@ 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>
-            <pre v-code><code>
+        <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>
+        <pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000"&gt;
 	&lt;template #header&gt;
 		&lt;h2&gt;Circular, AutoPlay&lt;/h2&gt;
@@ -133,305 +130,304 @@ data() {
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of objects to display.</td>
-                        </tr>
-                        <tr>
-                            <td>page</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Index of the first item.</td>
-                        </tr>
-                        <tr>
-                            <td>circular</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if scrolling would be infinite.</td>
-                        </tr>
-                        <tr>
-                            <td>autoplayInterval</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Time in milliseconds to scroll items automatically.</td>
-                        </tr>
-                        <tr>
-                            <td>numVisible</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Number of items per page.</td>
-                        </tr>
-                        <tr>
-                            <td>numScroll</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Number of items to scroll.</td>
-                        </tr>
-                        <tr>
-                            <td>responsiveOptions</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>An array of options for responsive design.</td>
-                        </tr>
-                        <tr>
-                            <td>orientation</td>
-                            <td>string</td>
-                            <td>horizontal</td>
-                            <td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td>
-                        </tr>
-                        <tr>
-                            <td>verticalViewPortHeight</td>
-                            <td>string</td>
-                            <td>300px</td>
-                            <td>Height of the viewport in vertical layout.</td>
-                        </tr>
-                        <tr>
-                            <td>contentClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of main content.</td>
-                        </tr>
-                        <tr>
-                            <td>containerClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the viewport container.</td>
-                        </tr>
-                        <tr>
-                            <td>indicatorsContentClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the indicator items.</td>
-                        </tr>
-                        <tr>
-                            <td>showNavigators</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to display navigation buttons in container.</td>
-                        </tr>
-                        <tr>
-                            <td>showIndicators</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to display indicator container.</td>
-                        </tr>
-                        <tr>
-                            <td>prevButtonProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLButtonElement to the previous navigation button.</td>
-                        </tr>
-                        <tr>
-                            <td>nextButtonProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLButtonElement to the next navigation button.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of objects to display.</td>
+                    </tr>
+                    <tr>
+                        <td>page</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Index of the first item.</td>
+                    </tr>
+                    <tr>
+                        <td>circular</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Defines if scrolling would be infinite.</td>
+                    </tr>
+                    <tr>
+                        <td>autoplayInterval</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Time in milliseconds to scroll items automatically.</td>
+                    </tr>
+                    <tr>
+                        <td>numVisible</td>
+                        <td>number</td>
+                        <td>1</td>
+                        <td>Number of items per page.</td>
+                    </tr>
+                    <tr>
+                        <td>numScroll</td>
+                        <td>number</td>
+                        <td>1</td>
+                        <td>Number of items to scroll.</td>
+                    </tr>
+                    <tr>
+                        <td>responsiveOptions</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>An array of options for responsive design.</td>
+                    </tr>
+                    <tr>
+                        <td>orientation</td>
+                        <td>string</td>
+                        <td>horizontal</td>
+                        <td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td>
+                    </tr>
+                    <tr>
+                        <td>verticalViewPortHeight</td>
+                        <td>string</td>
+                        <td>300px</td>
+                        <td>Height of the viewport in vertical layout.</td>
+                    </tr>
+                    <tr>
+                        <td>contentClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of main content.</td>
+                    </tr>
+                    <tr>
+                        <td>containerClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the viewport container.</td>
+                    </tr>
+                    <tr>
+                        <td>indicatorsContentClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the indicator items.</td>
+                    </tr>
+                    <tr>
+                        <td>showNavigators</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to display navigation buttons in container.</td>
+                    </tr>
+                    <tr>
+                        <td>showIndicators</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to display indicator container.</td>
+                    </tr>
+                    <tr>
+                        <td>prevButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the previous navigation button.</td>
+                    </tr>
+                    <tr>
+                        <td>nextButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the next navigation button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>item</td>
-                            <td>
-                                data: Data of the component<br />
-                                index: Index of the item
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>item</td>
+                        <td>
+                            data: Data of the component<br />
+                            index: Index of the item
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-carousel</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-header</td>
-                            <td>Header section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-footer</td>
-                            <td>Footer section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-content</td>
-                            <td>Main content element. It contains the container of the viewport.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-container</td>
-                            <td>Container of the viewport. It contains navigation buttons and viewport.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-items-content</td>
-                            <td>Viewport.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-indicators</td>
-                            <td>Container of the indicators.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-indicator</td>
-                            <td>Indicator element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-carousel</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-header</td>
+                        <td>Header section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-footer</td>
+                        <td>Footer section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-content</td>
+                        <td>Main content element. It contains the container of the viewport.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-container</td>
+                        <td>Container of the viewport. It contains navigation buttons and viewport.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-items-content</td>
+                        <td>Viewport.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-indicators</td>
+                        <td>Container of the indicators.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-indicator</td>
+                        <td>Indicator element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Carousel uses <i>region</i> role and since any attribute is passed to the main container element, attributes such as <i>aria-label</i> and <i>aria-roledescription</i> can be used as well. The slides container has
-                <i>aria-live</i> attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Carousel uses <i>region</i> role and since any attribute is passed to the main container element, attributes such as <i>aria-label</i> and <i>aria-roledescription</i> can be used as well. The slides container has
+            <i>aria-live</i> attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay.
+        </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>.
-            </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>.
+        </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>.
-            </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>.
+        </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>
+        <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>
 
-            <h6>Next/Prev Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <i>tab</i>
-                            </td>
-                            <td>Moves focus through interactive elements in the carousel.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>enter</i>
-                            </td>
-                            <td>Activates navigation.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>space</i>
-                            </td>
-                            <td>Activates navigation.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Next/Prev Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through interactive elements in the carousel.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates navigation.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates navigation.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Quick Navigation Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <i>tab</i>
-                            </td>
-                            <td>Moves focus through the active slide link.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>enter</i>
-                            </td>
-                            <td>Activates the focused slide link.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>space</i>
-                            </td>
-                            <td>Activates the focused slide link.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>right arrow</i>
-                            </td>
-                            <td>Moves focus to the next slide link.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>left arrow</i>
-                            </td>
-                            <td>Moves focus to the previous slide link.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>home</i>
-                            </td>
-                            <td>Moves focus to the first slide link.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>end</i>
-                            </td>
-                            <td>Moves focus to the last slide link.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Quick Navigation Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through the active slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Moves focus to the next slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Moves focus to the previous slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last slide link.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </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/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,29 +1,28 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Checkbox from 'primevue/checkbox';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p>
+        <pre v-code><code>
 &lt;Checkbox v-model="checked" :binary="true" /&gt;
 
 </code></pre>
 
-            <h5>Multiple Values</h5>
-            <p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p>
-            <pre v-code><code>
+        <h5>Multiple Values</h5>
+        <p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p>
+        <pre v-code><code>
 &lt;Checkbox name="city" value="Chicago" v-model="cities" /&gt;
 &lt;Checkbox name="city" value="Los Angeles" v-model="cities" /&gt;
 &lt;Checkbox name="city" value="New York" v-model="cities" /&gt;
@@ -31,7 +30,7 @@ import Checkbox from 'primevue/checkbox';
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -42,187 +41,187 @@ export default {
 
 </code></pre>
 
-            <p>As v-model is two-way binding enabled, prepopulating the model array with values is enough to display the related checkboxes as checked by default.</p>
+        <p>As v-model is two-way binding enabled, prepopulating the model array with values is enough to display the related checkboxes as checked by default.</p>
 
-            <h5>Properties</h5>
-            <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the checkbox.</td>
-                        </tr>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value binding of the checkbox.</td>
-                        </tr>
-                        <tr>
-                            <td>name</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the input element.</td>
-                        </tr>
-                        <tr>
-                            <td>binary</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Allows to select a boolean value instead of multiple values.</td>
-                        </tr>
-                        <tr>
-                            <td>trueValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value in checked state.</td>
-                        </tr>
-                        <tr>
-                            <td>falseValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value in unchecked state.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that an input field is read-only.</td>
-                        </tr>
-                        <tr>
-                            <td>required</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element is required.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Identifier of the underlying input element.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClass</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Style class of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines a string value that labels an interactive element.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-labelledby</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the checkbox.</td>
+                    </tr>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value binding of the checkbox.</td>
+                    </tr>
+                    <tr>
+                        <td>name</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the input element.</td>
+                    </tr>
+                    <tr>
+                        <td>binary</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Allows to select a boolean value instead of multiple values.</td>
+                    </tr>
+                    <tr>
+                        <td>trueValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value in checked state.</td>
+                    </tr>
+                    <tr>
+                        <td>falseValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value in unchecked state.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>readonly</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that an input field is read-only.</td>
+                    </tr>
+                    <tr>
+                        <td>required</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element is required.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying input element.</td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>In addition to the following events, any other valid events such as focus and blur are passed implicitly.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>click</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke on value click.</td>
-                        </tr>
-                        <tr>
-                            <td>change</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                        <tr>
-                            <td>input</td>
-                            <td>value: New value</td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <p>In addition to the following events, any other valid events such as focus and blur are passed implicitly.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>click</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke on value click.</td>
+                    </tr>
+                    <tr>
+                        <td>change</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                    <tr>
+                        <td>input</td>
+                        <td>value: New value</td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-checkbox</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-checkbox-box</td>
-                            <td>Container of icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-checkbox-icon</td>
-                            <td>Icon element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-checkbox</td>
+                        <td>Container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-checkbox-box</td>
+                        <td>Container of icon.</td>
+                    </tr>
+                    <tr>
+                        <td>p-checkbox-icon</td>
+                        <td>Icon element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using
-                <i>aria-labelledby</i>, <i>aria-label</i> props.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using
+            <i>aria-labelledby</i>, <i>aria-label</i> props.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;label for="chkbox1"&gt;Remember Me&lt;/label&gt;
 &lt;Checkbox inputId="chkbox1" /&gt;
 
@@ -233,32 +232,31 @@ export default {
 
 </code></pre>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the checkbox.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Toggles the checked state.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the checkbox.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the checked state.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/chip/ChipDoc.vue

@@ -1,179 +1,177 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Chip from 'primevue/chip';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/chip/chip.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Chip can display labels, icons and images.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Chip can display labels, icons and images.</p>
+        <pre v-code><code>
 &lt;Chip label="Text Only" /&gt;
 &lt;Chip label="Text with icon" icon="pi pi-check" /&gt;
 &lt;Chip label="Text with image" image="user.png" /&gt;
 
 </code></pre>
 
-            <h5>Removable</h5>
-            <p>Setting <i>removable</i> property displays an icon to close the chip, the optional <i>remove</i> event is available to get notified when a chip is hidden.</p>
-            <pre v-code><code>
+        <h5>Removable</h5>
+        <p>Setting <i>removable</i> property displays an icon to close the chip, the optional <i>remove</i> event is available to get notified when a chip is hidden.</p>
+        <pre v-code><code>
 &lt;Chip label="Text" removable /&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
-            <pre v-code><code>
+        <h5>Templating</h5>
+        <p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
+        <pre v-code><code>
 &lt;Chip&gt;
     Content
 &lt;/Chip&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the text to display.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the icon to display.</td>
-                        </tr>
-                        <tr>
-                            <td>image</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the image to display.</td>
-                        </tr>
-                        <tr>
-                            <td>removable</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display a remove icon.</td>
-                        </tr>
-                        <tr>
-                            <td>removeIcon</td>
-                            <td>string</td>
-                            <td>pi pi-times-circle</td>
-                            <td>Icon of the remove element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines the text to display.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines the icon to display.</td>
+                    </tr>
+                    <tr>
+                        <td>image</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines the image to display.</td>
+                    </tr>
+                    <tr>
+                        <td>removable</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to display a remove icon.</td>
+                    </tr>
+                    <tr>
+                        <td>removeIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times-circle</td>
+                        <td>Icon of the remove element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>remove</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke when a chip is removed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>remove</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke when a chip is removed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-chip</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-chip-image</td>
-                            <td>Container element in image mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-chip-text</td>
-                            <td>Text of the chip.</td>
-                        </tr>
-                        <tr>
-                            <td>p-chip-remove-icon</td>
-                            <td>Remove icon.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-chip</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-chip-image</td>
+                        <td>Container element in image mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-chip-text</td>
+                        <td>Text of the chip.</td>
+                    </tr>
+                    <tr>
+                        <td>p-chip-remove-icon</td>
+                        <td>Remove icon.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Chip uses the <i>label</i> property as the default <i>aria-label</i>, since any attribute is passed to the root element <i>aria-labelledby</i> or <i>aria-label</i> can be used to override the default behavior. Removable chips have a
-                <i>tabindex</i> and focusable with the tab key.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Chip uses the <i>label</i> property as the default <i>aria-label</i>, since any attribute is passed to the root element <i>aria-labelledby</i> or <i>aria-label</i> can be used to override the default behavior. Removable chips have a
+            <i>tabindex</i> and focusable with the tab key.
+        </p>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <i>backspace</i>
-                            </td>
-                            <td>Hides removable.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>enter</i>
-                            </td>
-                            <td>Hides removable.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>backspace</i>
+                        </td>
+                        <td>Hides removable.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Hides removable.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/chips/ChipsDoc.vue

@@ -1,222 +1,221 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Chips from 'primevue/chips';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/chips/chips.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>An array as the value can be bound using the standard v-model directive.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>An array as the value can be bound using the standard v-model directive.</p>
+        <pre v-code><code>
 &lt;Chips v-model="value" /&gt;
 
 </code></pre>
 
-            <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>
+        <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>
 &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>
-            <p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>max</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Maximum number of entries allowed.</td>
-                        </tr>
-                        <tr>
-                            <td>separator</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Separator char to add an item when pressed in addition to the enter key. Currently only possible value is ","</td>
-                        </tr>
-                        <tr>
-                            <td>addOnBlur</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to add an item when the input loses focus.</td>
-                        </tr>
-                        <tr>
-                            <td>allowDuplicate</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to allow duplicate values or not.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Placeholder text for the input.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
-                        </tr>
-                        <tr>
-                            <td>removeTokenIcon</td>
-                            <td>string</td>
-                            <td>pi pi-times-circle</td>
-                            <td>Icon to display in chip remove action.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>max</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Maximum number of entries allowed.</td>
+                    </tr>
+                    <tr>
+                        <td>separator</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Separator char to add an item when pressed in addition to the enter key. Currently only possible value is ","</td>
+                    </tr>
+                    <tr>
+                        <td>addOnBlur</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to add an item when the input loses focus.</td>
+                    </tr>
+                    <tr>
+                        <td>allowDuplicate</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to allow duplicate values or not.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>placeholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Placeholder text for the input.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the component input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>removeTokenIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times-circle</td>
+                        <td>Icon to display in chip remove action.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>add</td>
-                            <td>
-                                originalEvent: Browser event <br />
-                                value: Added item value
-                            </td>
-                            <td>Callback to invoke when a chip is added.</td>
-                        </tr>
-                        <tr>
-                            <td>remove</td>
-                            <td>
-                                originalEvent: Browser event <br />
-                                value: Removed item value
-                            </td>
-                            <td>Callback to invoke when a chip is removed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>add</td>
+                        <td>
+                            originalEvent: Browser event <br />
+                            value: Added item value
+                        </td>
+                        <td>Callback to invoke when a chip is added.</td>
+                    </tr>
+                    <tr>
+                        <td>remove</td>
+                        <td>
+                            originalEvent: Browser event <br />
+                            value: Removed item value
+                        </td>
+                        <td>Callback to invoke when a chip is removed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>chip</td>
-                            <td>value: Value of the component</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>chip</td>
+                        <td>value: Value of the component</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-chips</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-chips-token</td>
-                            <td>Chip element container.</td>
-                        </tr>
-                        <tr>
-                            <td>p-chips-token-icon</td>
-                            <td>Icon of a chip.</td>
-                        </tr>
-                        <tr>
-                            <td>p-chips-token-label</td>
-                            <td>label of a chip.</td>
-                        </tr>
-                        <tr>
-                            <td>p-chips-input-token</td>
-                            <td>Container of input element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-chips</td>
+                        <td>Container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-chips-token</td>
+                        <td>Chip element container.</td>
+                    </tr>
+                    <tr>
+                        <td>p-chips-token-icon</td>
+                        <td>Icon of a chip.</td>
+                    </tr>
+                    <tr>
+                        <td>p-chips-token-label</td>
+                        <td>label of a chip.</td>
+                    </tr>
+                    <tr>
+                        <td>p-chips-input-token</td>
+                        <td>Container of input element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <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.
-            </p>
+        <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.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;label for="chips1"&gt;Tags&lt;/label&gt;
 &lt;Chips inputId="chips1" /&gt;
 
@@ -227,66 +226,65 @@ import Chips from 'primevue/chips';
 
 </code></pre>
 
-            <h6>Input Field Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the input element</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Adds a new chips using the input field value.</td>
-                        </tr>
-                        <tr>
-                            <td><i>backspace</i></td>
-                            <td>Deletes the previous chip if the input field is empty.</td>
-                        </tr>
-                        <tr>
-                            <td><i>left arrow</i></td>
-                            <td>Moves focus to the previous chip if available and input field is empty.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Input Field Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the input element</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Adds a new chips using the input field value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>backspace</i></td>
+                        <td>Deletes the previous chip if the input field is empty.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Moves focus to the previous chip if available and input field is empty.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Chip Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>left arrow</i></td>
-                            <td>Moves focus to the previous chip if available.</td>
-                        </tr>
-                        <tr>
-                            <td><i>right arrow</i></td>
-                            <td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>backspace</i></td>
-                            <td>Deletes the chips and adds focus to the input field.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Chip Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Moves focus to the previous chip if available.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>backspace</i></td>
+                        <td>Deletes the chips and adds focus to the input field.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/colorpicker/ColorPickerDoc.vue

@@ -1,27 +1,26 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles" github="colorpicker/ColorPickerDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <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';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/colorpicker/colorpicker.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>A model can be bound using the standard v-model directive. Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb".</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>A model can be bound using the standard v-model directive. Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb".</p>
+        <pre v-code><code>
 &lt;ColorPicker v-model="color" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -32,278 +31,277 @@ export default {
 
 </code></pre>
 
-            <h5>Inline and Overlay</h5>
-            <p>ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.</p>
-            <pre v-code><code>
+        <h5>Inline and Overlay</h5>
+        <p>ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.</p>
+        <pre v-code><code>
 &lt;ColorPicker v-model="color" :inline="true" /&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>defaultColor</td>
-                            <td>string</td>
-                            <td>ff0000</td>
-                            <td>Initial color to display when value is not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>inline</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display as an overlay or not.</td>
-                        </tr>
-                        <tr>
-                            <td>format</td>
-                            <td>string</td>
-                            <td>hex</td>
-                            <td>Format to use in value binding, supported formats are "hex", "rgb" and "hsb".</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the component should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>autoZIndex</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to automatically manage layering.</td>
-                        </tr>
-                        <tr>
-                            <td>panelClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>defaultColor</td>
+                        <td>string</td>
+                        <td>ff0000</td>
+                        <td>Initial color to display when value is not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>inline</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to display as an overlay or not.</td>
+                    </tr>
+                    <tr>
+                        <td>format</td>
+                        <td>string</td>
+                        <td>hex</td>
+                        <td>Format to use in value binding, supported formats are "hex", "rgb" and "hsb".</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the component should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>change</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.value: Selected color
-                            </td>
-                            <td>Callback to invoke when a color is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Callback to invoke when popup is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke when popup is hidden.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.value: Selected color
+                        </td>
+                        <td>Callback to invoke when a color is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when popup is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when popup is hidden.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list style classed of the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-colorpicker</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-overlay</td>
-                            <td>Container element in overlay mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-preview</td>
-                            <td>Preview input in overlay mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-panel</td>
-                            <td>Panel element of the colorpicker.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-content</td>
-                            <td>Wrapper that contains color and hue sections.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-color-selector</td>
-                            <td>Color selector container.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-color</td>
-                            <td>Color element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-color-handle</td>
-                            <td>Handle of the color element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-hue</td>
-                            <td>Hue slider.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-hue-handle</td>
-                            <td>Handle of the hue slider.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list style classed of the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-colorpicker</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-overlay</td>
+                        <td>Container element in overlay mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-preview</td>
+                        <td>Preview input in overlay mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-panel</td>
+                        <td>Panel element of the colorpicker.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-content</td>
+                        <td>Wrapper that contains color and hue sections.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-color-selector</td>
+                        <td>Color selector container.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-color</td>
+                        <td>Color element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-color-handle</td>
+                        <td>Handle of the color element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-hue</td>
+                        <td>Hue slider.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-hue-handle</td>
+                        <td>Handle of the hue slider.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <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.
-            </p>
+        <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.
+        </p>
 
-            <h6>Closed State Keyboard Support of Popup ColorPicker</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the color picker button.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Opens the popup and moves focus to the color slider.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Closed State Keyboard Support of Popup ColorPicker</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the color picker button.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Opens the popup and moves focus to the color slider.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Popup Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Selects the color and closes the popup.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Selects the color and closes the popup.</td>
-                        </tr>
-                        <tr>
-                            <td><i>escape</i></td>
-                            <td>Closes the popup, moves focus to the input.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Popup Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Selects the color and closes the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Selects the color and closes the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup, moves focus to the input.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Color Picker Slider</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>arrow keys</i></td>
-                            <td>Changes color.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Color Picker Slider</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>arrow keys</i></td>
+                        <td>Changes color.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Hue Slider</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <span class="inline-flex flex-column">
-                                    <i class="mb-1">up arrow</i>
-                                    <i>down arrow</i>
-                                </span>
-                            </td>
-                            <td>Changes hue.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Hue Slider</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-column">
+                                <i class="mb-1">up arrow</i>
+                                <i>down arrow</i>
+                            </span>
+                        </td>
+                        <td>Changes hue.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/confirmdialog/ConfirmDialogDoc.vue

@@ -1,9 +1,8 @@
 <template>
-    <ClientOnly
-        ><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>
+    <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>
 import {createApp} from 'vue';
 import ConfirmationService from 'primevue/confirmationservice';
 
@@ -12,32 +11,32 @@ app.use(ConfirmationService);
 
 </code></pre>
 
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import ConfirmDialog from 'primevue/confirmdialog';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/confirmdialog/confirmdialog.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <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.
-            </p>
-            <pre v-code><code>
+        <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.
+        </p>
+        <pre v-code><code>
 &lt;ConfirmDialog&gt;&lt;/ConfirmDialog&gt;
 
 &lt;Button @click="delete()" icon="pi pi-check" label="Confirm"&gt;&lt;/Button&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	methods: {
         delete() {
@@ -64,9 +63,9 @@ export default {
 
 </code></pre>
 
-            <h5>Composition API</h5>
-            <p>The service can be injected with the <i>useConfirm</i> function.</p>
-            <pre v-code.script><code>
+        <h5>Composition API</h5>
+        <p>The service can be injected with the <i>useConfirm</i> function.</p>
+        <pre v-code.script><code>
 import { defineComponent } from "vue";
 import { useConfirm } from "primevue/useconfirm";
 
@@ -95,9 +94,9 @@ export default defineComponent({
 
 </code></pre>
 
-            <h5>Close Confirmation</h5>
-            <p>The dialog can also be hidden programmatically using the <i>close</i> method.</p>
-            <pre v-code.script><code>
+        <h5>Close Confirmation</h5>
+        <p>The dialog can also be hidden programmatically using the <i>close</i> method.</p>
+        <pre v-code.script><code>
 export default {
 	methods: {
         discard() {
@@ -108,268 +107,268 @@ export default {
 
 </code></pre>
 
-            <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>
+        <h5>Templating</h5>
+        <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
+        <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>
-            <p>
-                ConfirmDialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of
-                <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
-            </p>
-            <pre v-code><code>
+        <h5>Responsive</h5>
+        <p>
+            ConfirmDialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of
+            <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
+        </p>
+        <pre v-code><code>
 &lt;ConfirmDialog :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt;&lt;/ConfirmDialog&gt;
 
 </code></pre>
 
-            <h5>Confirmation Options</h5>
-            <p>ConfirmDialog can be customized with various options listed here.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>message</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Message of the confirmation.</td>
-                        </tr>
-                        <tr>
-                            <td>group</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon to display next to the message.</td>
-                        </tr>
-                        <tr>
-                            <td>header</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Header text of the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>position</td>
-                            <td>string</td>
-                            <td>center</td>
-                            <td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
-                        </tr>
-                        <tr>
-                            <td>accept</td>
-                            <td>Function</td>
-                            <td>null</td>
-                            <td>Callback to execute when action is confirmed.</td>
-                        </tr>
-                        <tr>
-                            <td>reject</td>
-                            <td>Function</td>
-                            <td>null</td>
-                            <td>Callback to execute when action is rejected.</td>
-                        </tr>
-                        <tr>
-                            <td>onShow</td>
-                            <td>Function</td>
-                            <td>null</td>
-                            <td>Callback to execute when dialog is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>onHide</td>
-                            <td>Function</td>
-                            <td>null</td>
-                            <td>Callback to execute when dialog is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>acceptLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>rejectLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>acceptIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon of the accept button.</td>
-                        </tr>
-                        <tr>
-                            <td>rejectIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon of the reject button.</td>
-                        </tr>
-                        <tr>
-                            <td>acceptClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the accept button.</td>
-                        </tr>
-                        <tr>
-                            <td>rejectClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the reject button.</td>
-                        </tr>
-                        <tr>
-                            <td>blockScroll</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether background scroll should be blocked when dialog is visible.</td>
-                        </tr>
-                        <tr>
-                            <td>defaultFocus</td>
-                            <td>string</td>
-                            <td>accept</td>
-                            <td>Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Confirmation Options</h5>
+        <p>ConfirmDialog can be customized with various options listed here.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>message</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Message of the confirmation.</td>
+                    </tr>
+                    <tr>
+                        <td>group</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon to display next to the message.</td>
+                    </tr>
+                    <tr>
+                        <td>header</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Header text of the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>position</td>
+                        <td>string</td>
+                        <td>center</td>
+                        <td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
+                    </tr>
+                    <tr>
+                        <td>accept</td>
+                        <td>Function</td>
+                        <td>null</td>
+                        <td>Callback to execute when action is confirmed.</td>
+                    </tr>
+                    <tr>
+                        <td>reject</td>
+                        <td>Function</td>
+                        <td>null</td>
+                        <td>Callback to execute when action is rejected.</td>
+                    </tr>
+                    <tr>
+                        <td>onShow</td>
+                        <td>Function</td>
+                        <td>null</td>
+                        <td>Callback to execute when dialog is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>onHide</td>
+                        <td>Function</td>
+                        <td>null</td>
+                        <td>Callback to execute when dialog is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>acceptLabel</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>rejectLabel</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>acceptIcon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon of the accept button.</td>
+                    </tr>
+                    <tr>
+                        <td>rejectIcon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon of the reject button.</td>
+                    </tr>
+                    <tr>
+                        <td>acceptClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the accept button.</td>
+                    </tr>
+                    <tr>
+                        <td>rejectClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the reject button.</td>
+                    </tr>
+                    <tr>
+                        <td>blockScroll</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether background scroll should be blocked when dialog is visible.</td>
+                    </tr>
+                    <tr>
+                        <td>defaultFocus</td>
+                        <td>string</td>
+                        <td>accept</td>
+                        <td>Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>ConfirmationService</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>require</td>
-                            <td>confirm: Confirmation Object</td>
-                            <td>Displays the dialog using the confirmation object options.</td>
-                        </tr>
-                        <tr>
-                            <td>close</td>
-                            <td>-</td>
-                            <td>Hides the dialog without invoking accept or reject callbacks.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>ConfirmationService</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>require</td>
+                        <td>confirm: Confirmation Object</td>
+                        <td>Displays the dialog using the confirmation object options.</td>
+                    </tr>
+                    <tr>
+                        <td>close</td>
+                        <td>-</td>
+                        <td>Hides the dialog without invoking accept or reject callbacks.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>group</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
-                        </tr>
-                        <tr>
-                            <td>breakpoints</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Object literal to define widths per screen size.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>group</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
+                    </tr>
+                    <tr>
+                        <td>breakpoints</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Object literal to define widths per screen size.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>message</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>message</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-confirm-dialog</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-confirm-dialog-message</td>
-                            <td>Container of message.</td>
-                        </tr>
-                        <tr>
-                            <td>p-confirm-dialog-icon</td>
-                            <td>Icon container inside content.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-confirm-dialog</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-confirm-dialog-message</td>
+                        <td>Container of message.</td>
+                    </tr>
+                    <tr>
+                        <td>p-confirm-dialog-icon</td>
+                        <td>Icon container inside content.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                ConfirmDialog component uses <i>alertdialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default
-                behavior. In addition <i>aria-modal</i> is added since focus is kept within the popup.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            ConfirmDialog component uses <i>alertdialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default
+            behavior. In addition <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.
-            </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.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;ConfirmDialog id="confirm" /&gt;
 
 &lt;Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"&gt;&lt;/Button&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 setup() {
     const confirm = useConfirm();
     const isVisible = ref(false);
@@ -392,66 +391,65 @@ setup() {
 
 </code></pre>
 
-            <h6>Overlay Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <i>tab</i>
-                            </td>
-                            <td>Moves focus to the next the focusable element within the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>tab</i></td>
-                            <td>Moves focus to the previous the focusable element within the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>escape</i>
-                            </td>
-                            <td>Closes the dialog.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Overlay Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next the focusable element within the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element within the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Buttons Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <i>enter</i>
-                            </td>
-                            <td>Closes the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>space</i>
-                            </td>
-                            <td>Closes the dialog.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Buttons Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/confirmpopup/ConfirmPopupDoc.vue

@@ -1,9 +1,8 @@
 <template>
-    <ClientOnly
-        ><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>
+    <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>
 import {createApp} from 'vue';
 import ConfirmationService from 'primevue/confirmationservice';
 
@@ -12,29 +11,29 @@ app.use(ConfirmationService);
 
 </code></pre>
 
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import ConfirmPopup from 'primevue/confirmpopup';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/confirmpopup/confirmpopup.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
+        <pre v-code><code>
 &lt;ConfirmPopup&gt;&lt;/ConfirmPopup&gt;
 
 &lt;Button @click="delete($event)" icon="pi pi-check" label="Confirm"&gt;&lt;/Button&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	methods: {
         delete(event) {
@@ -61,9 +60,9 @@ export default {
 
 </code></pre>
 
-            <h5>Composition API</h5>
-            <p>The service can be injected with the <i>useConfirm</i> function.</p>
-            <pre v-code.script><code>
+        <h5>Composition API</h5>
+        <p>The service can be injected with the <i>useConfirm</i> function.</p>
+        <pre v-code.script><code>
 import { defineComponent } from "vue";
 import { useConfirm } from "primevue/useconfirm";
 
@@ -96,9 +95,9 @@ export default defineComponent({
 
 </code></pre>
 
-            <h5>Close Confirmation</h5>
-            <p>The popup can also be hidden programmatically using the <i>close</i> method.</p>
-            <pre v-code.script><code>
+        <h5>Close Confirmation</h5>
+        <p>The popup can also be hidden programmatically using the <i>close</i> method.</p>
+        <pre v-code.script><code>
 export default {
 	methods: {
         discard() {
@@ -109,248 +108,247 @@ export default {
 
 </code></pre>
 
-            <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>
+        <h5>Templating</h5>
+        <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
+        <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>
-            <p>ConfirmDialog can be customized with various options listed here.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>target</td>
-                            <td>DomElement</td>
-                            <td>null</td>
-                            <td>Element to align the overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>message</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Message of the confirmation.</td>
-                        </tr>
-                        <tr>
-                            <td>group</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon to display next to the message.</td>
-                        </tr>
-                        <tr>
-                            <td>accept</td>
-                            <td>Function</td>
-                            <td>null</td>
-                            <td>Callback to execute when action is confirmed.</td>
-                        </tr>
-                        <tr>
-                            <td>reject</td>
-                            <td>Function</td>
-                            <td>null</td>
-                            <td>Callback to execute when action is rejected.</td>
-                        </tr>
-                        <tr>
-                            <td>onShow</td>
-                            <td>Function</td>
-                            <td>null</td>
-                            <td>Callback to execute when popup is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>onHide</td>
-                            <td>Function</td>
-                            <td>null</td>
-                            <td>Callback to execute when popup is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>acceptLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>rejectLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>acceptIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon of the accept button.</td>
-                        </tr>
-                        <tr>
-                            <td>rejectIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon of the reject button.</td>
-                        </tr>
-                        <tr>
-                            <td>acceptClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the accept button.</td>
-                        </tr>
-                        <tr>
-                            <td>rejectClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the reject button.</td>
-                        </tr>
-                        <tr>
-                            <td>defaultFocus</td>
-                            <td>string</td>
-                            <td>accept</td>
-                            <td>Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Confirmation Options</h5>
+        <p>ConfirmDialog can be customized with various options listed here.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>target</td>
+                        <td>DomElement</td>
+                        <td>null</td>
+                        <td>Element to align the overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>message</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Message of the confirmation.</td>
+                    </tr>
+                    <tr>
+                        <td>group</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon to display next to the message.</td>
+                    </tr>
+                    <tr>
+                        <td>accept</td>
+                        <td>Function</td>
+                        <td>null</td>
+                        <td>Callback to execute when action is confirmed.</td>
+                    </tr>
+                    <tr>
+                        <td>reject</td>
+                        <td>Function</td>
+                        <td>null</td>
+                        <td>Callback to execute when action is rejected.</td>
+                    </tr>
+                    <tr>
+                        <td>onShow</td>
+                        <td>Function</td>
+                        <td>null</td>
+                        <td>Callback to execute when popup is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>onHide</td>
+                        <td>Function</td>
+                        <td>null</td>
+                        <td>Callback to execute when popup is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>acceptLabel</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>rejectLabel</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>acceptIcon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon of the accept button.</td>
+                    </tr>
+                    <tr>
+                        <td>rejectIcon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon of the reject button.</td>
+                    </tr>
+                    <tr>
+                        <td>acceptClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the accept button.</td>
+                    </tr>
+                    <tr>
+                        <td>rejectClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the reject button.</td>
+                    </tr>
+                    <tr>
+                        <td>defaultFocus</td>
+                        <td>string</td>
+                        <td>accept</td>
+                        <td>Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>ConfirmationService</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>require</td>
-                            <td>confirm: Confirmation Object</td>
-                            <td>Displays the dialog using the confirmation object options.</td>
-                        </tr>
-                        <tr>
-                            <td>close</td>
-                            <td>-</td>
-                            <td>Hides the dialog without invoking accept or reject callbacks.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>ConfirmationService</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>require</td>
+                        <td>confirm: Confirmation Object</td>
+                        <td>Displays the dialog using the confirmation object options.</td>
+                    </tr>
+                    <tr>
+                        <td>close</td>
+                        <td>-</td>
+                        <td>Hides the dialog without invoking accept or reject callbacks.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>group</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>group</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>message</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>message</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-confirm-popup</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-confirm-popup-content</td>
-                            <td>Content element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-confirm-popup-icon</td>
-                            <td>Message icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-confirm-popup-message</td>
-                            <td>Message text.</td>
-                        </tr>
-                        <tr>
-                            <td>p-confirm-popup-footer</td>
-                            <td>Footer element for buttons.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-confirm-popup</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-confirm-popup-content</td>
+                        <td>Content element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-confirm-popup-icon</td>
+                        <td>Message icon.</td>
+                    </tr>
+                    <tr>
+                        <td>p-confirm-popup-message</td>
+                        <td>Message text.</td>
+                    </tr>
+                    <tr>
+                        <td>p-confirm-popup-footer</td>
+                        <td>Footer element for buttons.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                ConfirmPopup component uses <i>alertdialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition
-                <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.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            ConfirmPopup component uses <i>alertdialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition
+            <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.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;ConfirmPopup id="confirm" aria-label="popup" /&gt;
 
 &lt;Button @click="openPopup($event)" label="Confirm" id="confirmButton" :aria-expanded="isVisible" :aria-controls="isVisible ? 'confirm' : null" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 setup() {
     const confirm = useConfirm();
     const isVisible = ref(false);
@@ -374,66 +372,65 @@ setup() {
 
 </code></pre>
 
-            <h6>Overlay Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <i>tab</i>
-                            </td>
-                            <td>Moves focus to the next the focusable element within the popup.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>tab</i></td>
-                            <td>Moves focus to the previous the focusable element within the popup.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>escape</i>
-                            </td>
-                            <td>Closes the popup and moves focus to the trigger.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Overlay Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next the focusable element within the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element within the popup.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the popup and moves focus to the trigger.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Buttons Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <i>enter</i>
-                            </td>
-                            <td>Triggers the action, closes the popup and moves focus to the trigger.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>space</i>
-                            </td>
-                            <td>Triggers the action, closes the popup and moves focus to the trigger.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Buttons Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Triggers the action, closes the popup and moves focus to the trigger.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Triggers the action, closes the popup and moves focus to the trigger.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/contextmenu/ContextMenuDoc.vue

@@ -1,26 +1,25 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="ContextMenuDemo" :sources="sources" github="contextmenu/ContextMenuDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ContextMenuDemo" :sources="sources" github="contextmenu/ContextMenuDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import ContextMenu from 'primevue/contextmenu';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/contextmenu/contextmenu.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>MenuModel</h5>
-            <p>ContextMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
+        <h5>MenuModel</h5>
+        <p>ContextMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
 
-            <h5>Getting Started</h5>
-            <p>ContextMenu requires a collection of menuitems as its model.</p>
+        <h5>Getting Started</h5>
+        <p>ContextMenu requires a collection of menuitems as its model.</p>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 			return {
@@ -160,23 +159,23 @@ export default {
 
 </code></pre>
 
-            <h5>Document Menu</h5>
-            <p>Setting global property attaches the context menu to the document.</p>
-            <pre v-code><code>
+        <h5>Document Menu</h5>
+        <p>Setting global property attaches the context menu to the document.</p>
+        <pre v-code><code>
 &lt;ContextMenu :global="true" :model="items" /&gt;
 
 </code></pre>
 
-            <h5>Element Menu</h5>
-            <p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p>
+        <h5>Element Menu</h5>
+        <p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;img alt="logo" src="/demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
 &lt;ContextMenu ref="menu" :model="items" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 			return {
@@ -192,338 +191,337 @@ export default {
 
 </code></pre>
 
-            <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>
+        <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>
 &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>
+        <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
+        <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>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>model</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of menuitems.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>autoZIndex</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to automatically manage layering.</td>
-                        </tr>
-                        <tr>
-                            <td>global</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Attaches the menu to document instead of a particular item.</td>
-                        </tr>
-                        <tr>
-                            <td>exact</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines a string value that labels an interactive element.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-labelledby</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>model</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of menuitems.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
+                    </tr>
+                    <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+                    <tr>
+                        <td>global</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Attaches the menu to document instead of a particular item.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Methods</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>toggle</td>
-                            <td>event: Browser event</td>
-                            <td>Toggles the visibility of the menu.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>event: Browser event</td>
-                            <td>Shows the menu.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Hides the menu.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Methods</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>toggle</td>
+                        <td>event: Browser event</td>
+                        <td>Toggles the visibility of the menu.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>event: Browser event</td>
+                        <td>Shows the menu.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Hides the menu.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>focus</td>
-                            <td>event</td>
-                            <td>Callback to invoke when the component receives focus.</td>
-                        </tr>
-                        <tr>
-                            <td>blur</td>
-                            <td>event</td>
-                            <td>Callback to invoke when the component loses focus.</td>
-                        </tr>
-                        <tr>
-                            <td>before-show</td>
-                            <td>-</td>
-                            <td>Callback to invoke before the popup is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>before-hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke before the popup is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Callback to invoke when the popup is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke when the popup is hidden.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>focus</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
+                    </tr>
+                    <tr>
+                        <td>before-show</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the popup is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>before-hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the popup is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the popup is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the popup is hidden.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>item</td>
-                            <td>item: Menuitem instance</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>item: Menuitem instance</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-contextmenu</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-contextmenu-root-list</td>
-                            <td>Root list element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-submenu-list</td>
-                            <td>Submenu list element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem</td>
-                            <td>Menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-active</td>
-                            <td>Active menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-content</td>
-                            <td>Content of menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-link</td>
-                            <td>Link element of the menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-text</td>
-                            <td>Label of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-icon</td>
-                            <td>Icon of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-submenu-icon</td>
-                            <td>Arrow icon of a submenu.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-contextmenu</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-contextmenu-root-list</td>
+                        <td>Root list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-submenu-list</td>
+                        <td>Submenu list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem</td>
+                        <td>Menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-active</td>
+                        <td>Active menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-content</td>
+                        <td>Content of menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-link</td>
+                        <td>Link element of the menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-text</td>
+                        <td>Label of a menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-icon</td>
+                        <td>Icon of a menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-submenu-icon</td>
+                        <td>Arrow icon of a submenu.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <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.
-            </p>
+        <h5>Accessibility</h5>
+        <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.
+        </p>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <i>tab</i>
-                            </td>
-                            <td>When focus is in the menu, closes the context menu and moves focus to the next focusable element in the page sequence.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>enter</i>
-                            </td>
-                            <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>space</i>
-                            </td>
-                            <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>escape</i>
-                            </td>
-                            <td>Closes the context menu.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>down arrow</i>
-                            </td>
-                            <td>If focus is not inside the menu and menu is open, add focus to the first item. If an item is already focused, moves focus to the next menuitem within the submenu.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>up arrow</i>
-                            </td>
-                            <td>If focus is not inside the menu and menu is open, add focus to the last item. If an item is already focused, moves focus to the next menuitem within the submenu.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>right arrow</i>
-                            </td>
-                            <td>Opens a submenu if there is one available and moves focus to the first item.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>left arrow</i>
-                            </td>
-                            <td>Closes a submenu and moves focus to the root item of the closed submenu.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>home</i>
-                            </td>
-                            <td>Moves focus to the first menuitem within the submenu.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>end</i>
-                            </td>
-                            <td>Moves focus to the last menuitem within the submenu.</td>
-                        </tr>
-                        <tr>
-                            <td><i>any printable character</i></td>
-                            <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>When focus is in the menu, closes the context menu and moves focus to the next focusable element in the page sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the context menu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>If focus is not inside the menu and menu is open, add focus to the first item. If an item is already focused, moves focus to the next menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>If focus is not inside the menu and menu is open, add focus to the last item. If an item is already focused, moves focus to the next menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Opens a submenu if there is one available and moves focus to the first item.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Closes a submenu and moves focus to the root item of the closed submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </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/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,29 +1,28 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue">
-            <h5>Import via Module</h5>
+    <AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue">
+        <h5>Import via Module</h5>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import DataView from 'primevue/dataview';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/dataview/dataview.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>PrimeFlex</h5>
-            <p>DataView utilizes PrimeFlex library so it needs to be installed before getting started. Refer to <a href="https://www.primefaces.org/primeflex/gridsystem">PrimeFlex</a> documentation for details.</p>
+        <h5>PrimeFlex</h5>
+        <p>DataView utilizes PrimeFlex library so it needs to be installed before getting started. Refer to <a href="https://www.primefaces.org/primeflex/gridsystem">PrimeFlex</a> documentation for details.</p>
 
-            <h5>Getting Started</h5>
-            <p>
-                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>
+        <h5>Getting Started</h5>
+        <p>
+            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>
 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>
+        <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>
 &lt;template #list="slotProps"&gt;
 	&lt;div class="col-12"&gt;
         &lt;div class="car-details"&gt;
@@ -65,56 +64,56 @@ 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>
-            <p>Header and Footer are the two templates that are capable of displaying custom content.</p>
-            <pre v-code><code>
+        <h5>Sections</h5>
+        <p>Header and Footer are the two templates that are capable of displaying custom content.</p>
+        <pre v-code><code>
 &lt;template #header&gt;Header Content&lt;/template&gt;
 &lt;template #footer&gt;Footer Content&lt;/template&gt;
 
 </code></pre>
 
-            <h5>Empty Message</h5>
-            <p>Where there is no data to display, the optional <i>empty</i> template can be used to display information.</p>
-            <pre v-code><code>
+        <h5>Empty Message</h5>
+        <p>Where there is no data to display, the optional <i>empty</i> template can be used to display information.</p>
+        <pre v-code><code>
 &lt;template #empty&gt;No records found.&lt;/template&gt;
 
 </code></pre>
 
-            <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.
-            </p>
+        <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.
+        </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>
-            <p>
-                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>
+        <h5>Paginator</h5>
+        <p>
+            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>
 &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,21 +122,21 @@ 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>
-            <p>
-                <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>
+        <h5>Sorting</h5>
+        <p>
+            <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>
 &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.
-            </p>
-            <pre v-code><code><template v-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.
+        </p>
+        <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,276 +237,275 @@ export default {
         }
     }
 }
-</template>
+
 </code></pre>
 
-            <h5>Properties</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of objects to display.</td>
-                        </tr>
-                        <tr>
-                            <td>layout</td>
-                            <td>string</td>
-                            <td>list</td>
-                            <td>Layout of the items, valid values are "list" and "grid".</td>
-                        </tr>
-                        <tr>
-                            <td>rows</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Number of rows to display per page.</td>
-                        </tr>
-                        <tr>
-                            <td>first</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the first record to render.</td>
-                        </tr>
-                        <tr>
-                            <td>totalRecords</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Number of total records, defaults to length of value when not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>paginator</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified as true, enables the pagination.</td>
-                        </tr>
-                        <tr>
-                            <td>paginatorPosition</td>
-                            <td>string</td>
-                            <td>bottom</td>
-                            <td>Position of the paginator, options are "top","bottom" or "both".</td>
-                        </tr>
-                        <tr>
-                            <td>alwaysShowPaginator</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show it even there is only one page.</td>
-                        </tr>
-                        <tr>
-                            <td>paginatorTemplate</td>
-                            <td>string</td>
-                            <td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
-                            <td>Template of the paginator. See the <router-link to="/paginator">Paginator</router-link> for all available options.</td>
-                        </tr>
-                        <tr>
-                            <td>pageLinkSize</td>
-                            <td>number</td>
-                            <td>5</td>
-                            <td>Number of page links to display.</td>
-                        </tr>
-                        <tr>
-                            <td>rowsPerPageOptions</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Array of integer values to display inside rows per page dropdown.</td>
-                        </tr>
-                        <tr>
-                            <td>currentPageReportTemplate</td>
-                            <td>string</td>
-                            <td>({currentPage} of {totalPages})</td>
-                            <td>Template of the current page report element.</td>
-                        </tr>
-                        <tr>
-                            <td>sortField</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Property name or a getter function of data to use in sorting by default.</td>
-                        </tr>
-                        <tr>
-                            <td>sortOrder</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Order to sort the data by default.</td>
-                        </tr>
-                        <tr>
-                            <td>lazy</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if data is loaded and interacted with in lazy manner.</td>
-                        </tr>
-                        <tr>
-                            <td>dataKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the data that uniquely identifies the a record in the data.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of objects to display.</td>
+                    </tr>
+                    <tr>
+                        <td>layout</td>
+                        <td>string</td>
+                        <td>list</td>
+                        <td>Layout of the items, valid values are "list" and "grid".</td>
+                    </tr>
+                    <tr>
+                        <td>rows</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Number of rows to display per page.</td>
+                    </tr>
+                    <tr>
+                        <td>first</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the first record to render.</td>
+                    </tr>
+                    <tr>
+                        <td>totalRecords</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Number of total records, defaults to length of value when not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>paginator</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When specified as true, enables the pagination.</td>
+                    </tr>
+                    <tr>
+                        <td>paginatorPosition</td>
+                        <td>string</td>
+                        <td>bottom</td>
+                        <td>Position of the paginator, options are "top","bottom" or "both".</td>
+                    </tr>
+                    <tr>
+                        <td>alwaysShowPaginator</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to show it even there is only one page.</td>
+                    </tr>
+                    <tr>
+                        <td>paginatorTemplate</td>
+                        <td>string</td>
+                        <td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
+                        <td>Template of the paginator. See the <router-link to="/paginator">Paginator</router-link> for all available options.</td>
+                    </tr>
+                    <tr>
+                        <td>pageLinkSize</td>
+                        <td>number</td>
+                        <td>5</td>
+                        <td>Number of page links to display.</td>
+                    </tr>
+                    <tr>
+                        <td>rowsPerPageOptions</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Array of integer values to display inside rows per page dropdown.</td>
+                    </tr>
+                    <tr>
+                        <td>currentPageReportTemplate</td>
+                        <td>string</td>
+                        <td>({currentPage} of {totalPages})</td>
+                        <td>Template of the current page report element.</td>
+                    </tr>
+                    <tr>
+                        <td>sortField</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Property name or a getter function of data to use in sorting by default.</td>
+                    </tr>
+                    <tr>
+                        <td>sortOrder</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Order to sort the data by default.</td>
+                    </tr>
+                    <tr>
+                        <td>lazy</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Defines if data is loaded and interacted with in lazy manner.</td>
+                    </tr>
+                    <tr>
+                        <td>dataKey</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the data that uniquely identifies the a record in the data.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>page</td>
-                            <td>
-                                event.page: New page number <br />
-                                event.first: Index of first record <br />
-                                event.rows: Number of rows to display in new page <br />
-                                event.pageCount: Total number of pages
-                            </td>
-                            <td>Callback to invoke when page changes, the event object contains information about the new state.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>page</td>
+                        <td>
+                            event.page: New page number <br />
+                            event.first: Index of first record <br />
+                            event.rows: Number of rows to display in new page <br />
+                            event.pageCount: Total number of pages
+                        </td>
+                        <td>Callback to invoke when page changes, the event object contains information about the new state.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>paginatorstart</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>paginatorend</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>list</td>
-                            <td>
-                                data: Value of the component <br />
-                                index: Index of the list
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>grid</td>
-                            <td>
-                                data: Value of the component <br />
-                                index: Index of the grid
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>empty</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>paginatorstart</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>paginatorend</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>list</td>
+                        <td>
+                            data: Value of the component <br />
+                            index: Index of the list
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>grid</td>
+                        <td>
+                            data: Value of the component <br />
+                            index: Index of the grid
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>empty</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-dataview</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dataview-list</td>
-                            <td>Container element in list layout.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dataview-grid</td>
-                            <td>Container element in grid layout.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dataview-header</td>
-                            <td>Header section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dataview-footer</td>
-                            <td>Footer section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dataview-content</td>
-                            <td>Container of items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dataview-emptymessage</td>
-                            <td>Empty message element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-dataview</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dataview-list</td>
+                        <td>Container element in list layout.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dataview-grid</td>
+                        <td>Container element in grid layout.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dataview-header</td>
+                        <td>Header section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dataview-footer</td>
+                        <td>Footer section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dataview-content</td>
+                        <td>Container of items.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dataview-emptymessage</td>
+                        <td>Empty message element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <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.
-            </p>
+        <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.
+        </p>
 
-            <p>Refer to <router-link to="/paginator">paginator</router-link> accessibility documentation for the paginator of the component.</p>
+        <p>Refer to <router-link to="/paginator">paginator</router-link> accessibility documentation for the paginator of the component.</p>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <i>tab</i>
-                            </td>
-                            <td>Moves focus to the buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>space</i>
-                            </td>
-                            <td>Toggles the checked state of a button.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the buttons.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the checked state of a button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>PrimeFlex</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>PrimeFlex</p>
+    </AppDoc>
 </template>
 
 <script>

pages/deferredcontent/DeferredContentDoc.vue

@@ -1,22 +1,21 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="deferredcontent/DeferredContentDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <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';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/deferredcontent/deferredcontent.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>DeferredContent is used as a wrapper element of its content..</p>
-            <pre v-code><code><template v-pre>
+        <h5>Getting Started</h5>
+        <p>DeferredContent is used as a wrapper element of its content..</p>
+        <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>
+        <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>
 &lt;DeferredContent @load="onDataLoad"&gt;
     &lt;DataTable :value="cars"&gt;
         &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -39,56 +38,55 @@ 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>
-            <p>Component has no properties.</p>
+        <h5>Properties</h5>
+        <p>Component has no properties.</p>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>load</td>
-                            <td>event: Event object</td>
-                            <td>Callback to invoke when deferred content is loaded..</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>load</td>
+                        <td>event: Event object</td>
+                        <td>Callback to invoke when deferred content is loaded..</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Component does not apply any styling.</p>
+        <h5>Styling</h5>
+        <p>Component does not apply any styling.</p>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                DeferredContent 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 you
-                have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            DeferredContent 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 you
+            have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down"&gt;
     Content
 &lt;/DeferredContent&gt;
 
 </code></pre>
 
-            <h5>Keyboard Support</h5>
-            <p>Component does not include any interactive elements.</p>
+        <h5>Keyboard Support</h5>
+        <p>Component does not include any interactive elements.</p>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/dialog/DialogDoc.vue

@@ -1,28 +1,27 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Dialog from 'primevue/dialog';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Dialog is used as a container and visibility is managed with <i>visible</i> property that requires the v-model for two-way binding.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Dialog is used as a container and visibility is managed with <i>visible</i> property that requires the v-model for two-way binding.</p>
+        <pre v-code><code>
 &lt;Dialog header="Header" v-model:visible="display" &gt;
 	Content
 &lt;/Dialog&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -33,16 +32,16 @@ export default {
 
 </code></pre>
 
-            <h5>Header and Footer</h5>
-            <p>Header and Footer sections are defined using properties with the same name that accept simple strings or with the <i>header</i> and <i>footer</i> templates for custom content.</p>
-            <pre v-code><code>
+        <h5>Header and Footer</h5>
+        <p>Header and Footer sections are defined using properties with the same name that accept simple strings or with the <i>header</i> and <i>footer</i> templates for custom content.</p>
+        <pre v-code><code>
 &lt;Dialog header="Header" footer="Footer" v-model:visible="display"&gt;
 	Content
 &lt;/Dialog&gt;
 
 </code></pre>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Dialog v-model:visible="display"&gt;
     &lt;template #header&gt;
 		&lt;h3&gt;Header&lt;/h3&gt;
@@ -58,31 +57,31 @@ export default {
 
 </code></pre>
 
-            <h5>Positioning</h5>
-            <p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright".</p>
-            <pre v-code><code>
+        <h5>Positioning</h5>
+        <p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright".</p>
+        <pre v-code><code>
 &lt;Dialog position="top" v-model:visible="display"&gt;
 	Content
 &lt;/Dialog&gt;
 
 </code></pre>
 
-            <h5>Responsive</h5>
-            <p>
-                Dialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of
-                <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
-            </p>
+        <h5>Responsive</h5>
+        <p>
+            Dialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of
+            <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Dialog v-model:visible="display" :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt;
 	Content
 &lt;/Dialog&gt;
 
 </code></pre>
 
-            <h5>Initial Focus</h5>
-            <p>Adding <i>autofocus</i> to an element in the dialog makes it the initial focus target when dialog gets shown.</p>
-            <pre v-code><code>
+        <h5>Initial Focus</h5>
+        <p>Adding <i>autofocus</i> to an element in the dialog makes it the initial focus target when dialog gets shown.</p>
+        <pre v-code><code>
 &lt;Dialog v-model:visible="display"&gt;
     Content
 	&lt;template #footer&gt;
@@ -93,301 +92,301 @@ export default {
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Title content of the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Footer content of the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>visible</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Specifies the visibility of the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>modal</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Defines if background should be blocked when dialog is displayed.</td>
-                        </tr>
-                        <tr>
-                            <td>closeOnEscape</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Specifies if pressing escape key should hide the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>dismissableMask</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Specifies if clicking the modal background should hide the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>position</td>
-                            <td>string</td>
-                            <td>center</td>
-                            <td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
-                        </tr>
-                        <tr>
-                            <td>contentStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Style of the content section.</td>
-                        </tr>
-                        <tr>
-                            <td>contentClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the content section.</td>
-                        </tr>
-                        <tr>
-                            <td>contentProps</td>
-                            <td>null</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.</td>
-                        </tr>
-                        <tr>
-                            <td>rtl</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>When enabled dialog is displayed in RTL direction.</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Adds a close icon to the header to hide the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>showHeader</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show the header or not.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>autoZIndex</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to automatically manage layering.</td>
-                        </tr>
-                        <tr>
-                            <td style="text-decoration: line-through">ariaCloseLabel</td>
-                            <td>string</td>
-                            <td>close</td>
-                            <td>
-                                Aria label of the close icon.
-                                <br />
-                                <b> Deprecated: </b> <i>aria.close</i> can be used in defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>maximizable</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the dialog can be displayed full screen.</td>
-                        </tr>
-                        <tr>
-                            <td>breakpoints</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Object literal to define widths per screen size.</td>
-                        </tr>
-                        <tr>
-                            <td>draggable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Enables dragging to change the position using header.</td>
-                        </tr>
-                        <tr>
-                            <td>minX</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Minimum value for the left coordinate of dialog in dragging.</td>
-                        </tr>
-                        <tr>
-                            <td>minY</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Minimum value for the top coordinate of dialog in dragging.</td>
-                        </tr>
-                        <tr>
-                            <td>keepInViewport</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Keeps dialog in the viewport when dragging.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
-                        </tr>
-                        <tr>
-                            <td>closeIcon</td>
-                            <td>string</td>
-                            <td>pi pi-times</td>
-                            <td>Icon to display in the dialog close button.</td>
-                        </tr>
-                        <tr>
-                            <td>maximizeIcon</td>
-                            <td>string</td>
-                            <td>pi pi-window-maximize</td>
-                            <td>Icon to display in the dialog maximize button when dialog is not maximized.</td>
-                        </tr>
-                        <tr>
-                            <td>minimizeIcon</td>
-                            <td>string</td>
-                            <td>pi pi-window-minimize</td>
-                            <td>Icon to display in the dialog maximize button when dialog is maximized.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Title content of the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Footer content of the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>visible</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Specifies the visibility of the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>modal</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>Defines if background should be blocked when dialog is displayed.</td>
+                    </tr>
+                    <tr>
+                        <td>closeOnEscape</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Specifies if pressing escape key should hide the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>dismissableMask</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Specifies if clicking the modal background should hide the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>position</td>
+                        <td>string</td>
+                        <td>center</td>
+                        <td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
+                    </tr>
+                    <tr>
+                        <td>contentStyle</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Style of the content section.</td>
+                    </tr>
+                    <tr>
+                        <td>contentClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the content section.</td>
+                    </tr>
+                    <tr>
+                        <td>contentProps</td>
+                        <td>null</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>rtl</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>When enabled dialog is displayed in RTL direction.</td>
+                    </tr>
+                    <tr>
+                        <td>closable</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Adds a close icon to the header to hide the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>showHeader</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to show the header or not.</td>
+                    </tr>
+                    <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+                    <tr>
+                        <td style="text-decoration: line-through">ariaCloseLabel</td>
+                        <td>string</td>
+                        <td>close</td>
+                        <td>
+                            Aria label of the close icon.
+                            <br />
+                            <b> Deprecated: </b> <i>aria.close</i> can be used in defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>maximizable</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the dialog can be displayed full screen.</td>
+                    </tr>
+                    <tr>
+                        <td>breakpoints</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Object literal to define widths per screen size.</td>
+                    </tr>
+                    <tr>
+                        <td>draggable</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Enables dragging to change the position using header.</td>
+                    </tr>
+                    <tr>
+                        <td>minX</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Minimum value for the left coordinate of dialog in dragging.</td>
+                    </tr>
+                    <tr>
+                        <td>minY</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Minimum value for the top coordinate of dialog in dragging.</td>
+                    </tr>
+                    <tr>
+                        <td>keepInViewport</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Keeps dialog in the viewport when dragging.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
+                    </tr>
+                    <tr>
+                        <td>closeIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times</td>
+                        <td>Icon to display in the dialog close button.</td>
+                    </tr>
+                    <tr>
+                        <td>maximizeIcon</td>
+                        <td>string</td>
+                        <td>pi pi-window-maximize</td>
+                        <td>Icon to display in the dialog maximize button when dialog is not maximized.</td>
+                    </tr>
+                    <tr>
+                        <td>minimizeIcon</td>
+                        <td>string</td>
+                        <td>pi pi-window-minimize</td>
+                        <td>Icon to display in the dialog maximize button when dialog is maximized.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke when dialog is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>after-hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke after dialog is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Callback to invoke when dialog is showed.</td>
-                        </tr>
-                        <tr>
-                            <td>maximize</td>
-                            <td>event: Event object</td>
-                            <td>Fired when a dialog gets maximized.</td>
-                        </tr>
-                        <tr>
-                            <td>unmaximize</td>
-                            <td>event: Event object</td>
-                            <td>Fired when a dialog gets unmaximized.</td>
-                        </tr>
-                        <tr>
-                            <td>dragend</td>
-                            <td>event: Event object</td>
-                            <td>Fired when a dialog drag completes..</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when dialog is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>after-hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke after dialog is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when dialog is showed.</td>
+                    </tr>
+                    <tr>
+                        <td>maximize</td>
+                        <td>event: Event object</td>
+                        <td>Fired when a dialog gets maximized.</td>
+                    </tr>
+                    <tr>
+                        <td>unmaximize</td>
+                        <td>event: Event object</td>
+                        <td>Fired when a dialog gets unmaximized.</td>
+                    </tr>
+                    <tr>
+                        <td>dragend</td>
+                        <td>event: Event object</td>
+                        <td>Fired when a dialog drag completes..</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-dialog</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dialog-titlebar</td>
-                            <td>Container of header.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dialog-title</td>
-                            <td>Header element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dialog-titlebar-icon</td>
-                            <td>Icon container inside header.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dialog-titlebar-close</td>
-                            <td>Close icon element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dialog-content</td>
-                            <td>Content element</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-dialog</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dialog-titlebar</td>
+                        <td>Container of header.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dialog-title</td>
+                        <td>Header element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dialog-titlebar-icon</td>
+                        <td>Icon container inside header.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dialog-titlebar-close</td>
+                        <td>Close icon element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dialog-content</td>
+                        <td>Content element</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Dialog component uses <i>dialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default behavior. In
-                addition <i>aria-modal</i> is added since focus is kept within the popup.
-            </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>.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Dialog component uses <i>dialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default behavior. In
+            addition <i>aria-modal</i> is added since focus is kept within the popup.
+        </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>.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'dlg' : null" :aria-expanded="visible ? true : false" /&gt;
 
 &lt;Dialog id="dlg" header="Header" v-model:visible="visible" :style="{ width: '50vw' }"&gt;
@@ -396,66 +395,65 @@ export default {
 
 </code></pre>
 
-            <h6>Overlay Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <i>tab</i>
-                            </td>
-                            <td>Moves focus to the next the focusable element within the dialog if <i>modal</i> is true. Otherwise, the focusable element in the page tab sequence.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>tab</i></td>
-                            <td>Moves focus to the previous the focusable element within the dialog if <i>modal</i> is true. Otherwise, the focusable element in the page tab sequence.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>escape</i>
-                            </td>
-                            <td>Closes the dialog if <i>closeOnEscape</i> is true.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Overlay Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next the focusable element within the dialog if <i>modal</i> is true. Otherwise, the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element within the dialog if <i>modal</i> is true. Otherwise, the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the dialog if <i>closeOnEscape</i> is true.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Close Button Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <i>enter</i>
-                            </td>
-                            <td>Closes the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>space</i>
-                            </td>
-                            <td>Closes the dialog.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Close Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/divider/DividerDoc.vue

@@ -1,40 +1,39 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Divider from 'primevue/divider';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/divider/divider.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Divider has two orientations defined with the <i>layout</i> property, default is "horizontal" and the alternative is "vertical".</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Divider has two orientations defined with the <i>layout</i> property, default is "horizontal" and the alternative is "vertical".</p>
+        <pre v-code><code>
 &lt;div&gt;Content 1&lt;/div&gt;
 &lt;Divider /&gt;
 &lt;div&gt;Content 2&lt;/div&gt;
 
 </code></pre>
 
-            <h5>Border Style</h5>
-            <p>Style of the border is configured with the <i>type</i> property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted".</p>
-            <pre v-code><code>
+        <h5>Border Style</h5>
+        <p>Style of the border is configured with the <i>type</i> property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted".</p>
+        <pre v-code><code>
 &lt;div&gt;Content 1&lt;/div&gt;
 &lt;Divider type="dashed"/&gt;
 &lt;div&gt;Content 2&lt;/div&gt;
 
 </code></pre>
 
-            <h5>Vertical Divider</h5>
-            <p>Vertical divider is enabled by setting the <i>layout</i> property as "vertical".</p>
-            <pre v-code><code>
+        <h5>Vertical Divider</h5>
+        <p>Vertical divider is enabled by setting the <i>layout</i> property as "vertical".</p>
+        <pre v-code><code>
 &lt;div class="flex"&gt;
     &lt;div&gt;Content 1&lt;/div&gt;
     &lt;Divider layout="vertical" /&gt;
@@ -45,12 +44,12 @@ import Divider from 'primevue/divider';
 
 </code></pre>
 
-            <h5>Content</h5>
-            <p>
-                Any content placed inside is rendered within the boundaries of the divider. In addition, location of the content is configured with the <i>align</i> property. In horizontal layout, alignment options are "left", "center" and "right"
-                whereas vertical mode supports "top", "center" and "bottom".
-            </p>
-            <pre v-code><code>
+        <h5>Content</h5>
+        <p>
+            Any content placed inside is rendered within the boundaries of the divider. In addition, location of the content is configured with the <i>align</i> property. In horizontal layout, alignment options are "left", "center" and "right"
+            whereas vertical mode supports "top", "center" and "bottom".
+        </p>
+        <pre v-code><code>
 &lt;div&gt;Content 1&lt;/div&gt;
 
 &lt;Divider align="left"&gt;
@@ -76,111 +75,110 @@ import Divider from 'primevue/divider';
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>align</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Alignment of the content, options are "left", "center", "right" for horizontal layout and "top", "center", "bottom" for vertical.</td>
-                        </tr>
-                        <tr>
-                            <td>layout</td>
-                            <td>string</td>
-                            <td>horizontal</td>
-                            <td>Specifies the orientation, valid values are "horizontal" and "vertical".</td>
-                        </tr>
-                        <tr>
-                            <td>type</td>
-                            <td>string</td>
-                            <td>solid</td>
-                            <td>Border style type, default is "solid" and other options are "dashed" and "dotted".</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>align</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Alignment of the content, options are "left", "center", "right" for horizontal layout and "top", "center", "bottom" for vertical.</td>
+                    </tr>
+                    <tr>
+                        <td>layout</td>
+                        <td>string</td>
+                        <td>horizontal</td>
+                        <td>Specifies the orientation, valid values are "horizontal" and "vertical".</td>
+                    </tr>
+                    <tr>
+                        <td>type</td>
+                        <td>string</td>
+                        <td>solid</td>
+                        <td>Border style type, default is "solid" and other options are "dashed" and "dotted".</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-divider</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-horizontal</td>
-                            <td>Container element in horizontal layout.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-vertical</td>
-                            <td>Container element in vertical layout.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-solid</td>
-                            <td>Container element with solid border.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-dashed</td>
-                            <td>Container element with dashed border.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-dotted</td>
-                            <td>Container element with dotted border.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-left</td>
-                            <td>Container element with content aligned to left.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-right</td>
-                            <td>Container element with content aligned to right.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-center</td>
-                            <td>Container element with content aligned to center.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-bottom</td>
-                            <td>Container element with content aligned to bottom.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-top</td>
-                            <td>Container element with content aligned to top.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-divider</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-horizontal</td>
+                        <td>Container element in horizontal layout.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-vertical</td>
+                        <td>Container element in vertical layout.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-solid</td>
+                        <td>Container element with solid border.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-dashed</td>
+                        <td>Container element with dashed border.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-dotted</td>
+                        <td>Container element with dotted border.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-left</td>
+                        <td>Container element with content aligned to left.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-right</td>
+                        <td>Container element with content aligned to right.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-center</td>
+                        <td>Container element with content aligned to center.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-bottom</td>
+                        <td>Container element with content aligned to bottom.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-top</td>
+                        <td>Container element with content aligned to top.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>Divider uses a <i>separator</i> role with <i>aria-orientation</i> set to either "horizontal" or "vertical".</p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>Divider uses a <i>separator</i> role with <i>aria-orientation</i> set to either "horizontal" or "vertical".</p>
 
-            <h5>Keyboard Support</h5>
-            <p>Component does not include any interactive elements.</p>
+        <h5>Keyboard Support</h5>
+        <p>Component does not include any interactive elements.</p>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/dock/DockDoc.vue

@@ -1,28 +1,27 @@
 <template>
-    <ClientOnly
-        ><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>
+    <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';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/slider/slider.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Dock is a navigation component consisting of menuitems. It has a collection of additional options defined by the <i>model</i> property.</p>
+        <h5>Getting Started</h5>
+        <p>Dock is a navigation component consisting of menuitems. It has a collection of additional options defined by the <i>model</i> property.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Dock :model="items" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code><template>
+        <pre v-code.script><code><template>
     export default {
         data() {
             return {
@@ -51,246 +50,245 @@ import Dock from 'primevue/dock';
 </template>
 </code></pre>
 
-            <h5>MenuModel API</h5>
-            <p>Dock uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
+        <h5>MenuModel API</h5>
+        <p>Dock uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>model</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>MenuModel instance to define the action items.</td>
-                        </tr>
-                        <tr>
-                            <td>position</td>
-                            <td>string</td>
-                            <td>bottom</td>
-                            <td>Position of element. Valid values are 'bottom', 'top', 'left' and 'right'.</td>
-                        </tr>
-                        <tr>
-                            <td>class</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>exact</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltipOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Whether to display the tooltip on items. The modifiers of <router-link to="/tooltip">Tooltip</router-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
-                        </tr>
-                        <tr>
-                            <td>menuId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the menu.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>model</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>MenuModel instance to define the action items.</td>
+                    </tr>
+                    <tr>
+                        <td>position</td>
+                        <td>string</td>
+                        <td>bottom</td>
+                        <td>Position of element. Valid values are 'bottom', 'top', 'left' and 'right'.</td>
+                    </tr>
+                    <tr>
+                        <td>class</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the element.</td>
+                    </tr>
+                    <tr>
+                        <td>style</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Inline style of the element.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
+                    </tr>
+                    <tr>
+                        <td>tooltipOptions</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Whether to display the tooltip on items. The modifiers of <router-link to="/tooltip">Tooltip</router-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
+                    </tr>
+                    <tr>
+                        <td>menuId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Unique identifier of the menu.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>focus</td>
-                            <td>event</td>
-                            <td>Callback to invoke when the component receives focus.</td>
-                        </tr>
-                        <tr>
-                            <td>blur</td>
-                            <td>event</td>
-                            <td>Callback to invoke when the component loses focus.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>focus</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-dock</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dock-list-container</td>
-                            <td>Container of the list.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dock-list</td>
-                            <td>List of items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dock-item</td>
-                            <td>Each items in list.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-content</td>
-                            <td>Content of menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dock-link</td>
-                            <td>Link of the menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dock-icon</td>
-                            <td>Icon of a menuitem.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-dock</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dock-list-container</td>
+                        <td>Container of the list.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dock-list</td>
+                        <td>List of items.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dock-item</td>
+                        <td>Each items in list.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-content</td>
+                        <td>Content of menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dock-link</td>
+                        <td>Link of the menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dock-icon</td>
+                        <td>Icon of a menuitem.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>item</td>
-                            <td>
-                                item: Custom content for menuitem<br />
-                                index: Index of the menuitem
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>item: Custom content for icon</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>
+                            item: Custom content for menuitem<br />
+                            index: Index of the menuitem
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>item: Custom content for icon</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Dock component uses the <i>menu</i> role with the <i>aria-orientation</i> 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.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Dock component uses the <i>menu</i> role with the <i>aria-orientation</i> 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.
+        </p>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <i>tab</i>
-                            </td>
-                            <td>Moves focus to the first menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>enter</i>
-                            </td>
-                            <td>Activates the focused menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>space</i>
-                            </td>
-                            <td>Activates the focused menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>down arrow</i>
-                            </td>
-                            <td>Moves focus to the next menuitem in vertical layout.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>up arrow</i>
-                            </td>
-                            <td>Moves focus to the previous menuitem in vertical layout.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>right arrow</i>
-                            </td>
-                            <td>Moves focus to the next menuitem in horizontal layout.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>left arrow</i>
-                            </td>
-                            <td>Moves focus to the previous menuitem in horizontal layout.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>home</i>
-                            </td>
-                            <td>Moves focus to the first menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>end</i>
-                            </td>
-                            <td>Moves focus to the last menuitem.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the first menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next menuitem in vertical layout.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous menuitem in vertical layout.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Moves focus to the next menuitem in horizontal layout.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Moves focus to the previous menuitem in horizontal layout.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last menuitem.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/dynamicdialog/DynamicDialogDoc.vue

@@ -1,10 +1,9 @@
 <template>
-    <ClientOnly
-        ><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>
+    <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>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import {createApp} from 'vue';
 import DialogService from 'primevue/dialogservice';
 
@@ -13,50 +12,50 @@ app.use(DialogService);
 
 </code></pre>
 
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import DynamicDialog from 'primevue/dynamicdialog';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/dynamicdialog/dynamicdialog.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Ideal location of a DynamicDialog is the main application template so that it can be used by any component within the application.</p>
+        <h5>Getting Started</h5>
+        <p>Ideal location of a DynamicDialog is the main application template so that it can be used by any component within the application.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;template&gt;
     &lt;DynamicDialog /&gt;
 &lt;template&gt;
 
 </code></pre>
 
-            <h5>Options API</h5>
-            <p><i>$dialog</i> is available as a property in the application instance.</p>
-            <pre v-code.script><code>
+        <h5>Options API</h5>
+        <p><i>$dialog</i> is available as a property in the application instance.</p>
+        <pre v-code.script><code>
 const dialogRef = this.$dialog;
 
 </code></pre>
 
-            <h5>Composition API</h5>
-            <p>The service can be injected with the <i>useDialog</i> function.</p>
-            <pre v-code.script><code>
+        <h5>Composition API</h5>
+        <p>The service can be injected with the <i>useDialog</i> function.</p>
+        <pre v-code.script><code>
 import { useDialog } from 'primevue/usedialog';
 
 const dialog = useDialog();
 
 </code></pre>
 
-            <h5>Opening a Dialog</h5>
-            <p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p>
+        <h5>Opening a Dialog</h5>
+        <p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p>
 
-            <h6>Options API</h6>
-            <pre v-code.script><code>
+        <h6>Options API</h6>
+        <pre v-code.script><code>
 import ProductListDemo from './ProductListDemo';
 
 export default {
@@ -69,8 +68,8 @@ export default {
 
 </code></pre>
 
-            <h6>Composition API</h6>
-            <pre v-code.script><code>
+        <h6>Composition API</h6>
+        <pre v-code.script><code>
 import ProductListDemo from './ProductListDemo';
 import { useDialog } from 'primevue/usedialog';
 
@@ -85,11 +84,11 @@ export default {
 
 </code></pre>
 
-            <h5>Closing a Dialog</h5>
-            <p>The <i>close</i> function of the <i>dialogRef</i> is used to hide a Dialog. The <i>dialogRef</i> is injected to the component that is loaded by the dialog.</p>
+        <h5>Closing a Dialog</h5>
+        <p>The <i>close</i> function of the <i>dialogRef</i> is used to hide a Dialog. The <i>dialogRef</i> is injected to the component that is loaded by the dialog.</p>
 
-            <h6>Options API</h6>
-            <pre v-code.script><code>
+        <h6>Options API</h6>
+        <pre v-code.script><code>
 export default {
     inject: ['dialogRef'],
     methods:{
@@ -101,8 +100,8 @@ export default {
 
 </code></pre>
 
-            <h6>Composition API</h6>
-            <pre v-code.script><code>
+        <h6>Composition API</h6>
+        <pre v-code.script><code>
 import { inject } from 'vue'
 
 export default {
@@ -116,10 +115,10 @@ export default {
 
 </code></pre>
 
-            <h5>Passing Data</h5>
-            <p>Data can be passed to the component that is loaded by the Dialog and also from the component back to the caller component. Use the <i>open</i> function and pass your parameters with the <i>data</i> property in the options object.</p>
+        <h5>Passing Data</h5>
+        <p>Data can be passed to the component that is loaded by the Dialog and also from the component back to the caller component. Use the <i>open</i> function and pass your parameters with the <i>data</i> property in the options object.</p>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 this.$dialog.open(ProductListDemo, {
     data: {
         user: 'primetime'
@@ -128,7 +127,7 @@ this.$dialog.open(ProductListDemo, {
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     inject: ['dialogRef'],
     mounted:{
@@ -138,8 +137,8 @@ export default {
 
 </code></pre>
 
-            <p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback defined by the <i>open</i> function at the caller.</p>
-            <pre v-code.script><code>
+        <p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback defined by the <i>open</i> function at the caller.</p>
+        <pre v-code.script><code>
 this.$dialog.open(ProductListDemo, {
     onClose(options) {
         const callbackParams = options.data; //{id: 12}
@@ -148,7 +147,7 @@ this.$dialog.open(ProductListDemo, {
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     inject: ['dialogRef'],
     methods:{
@@ -160,10 +159,10 @@ export default {
 
 </code></pre>
 
-            <h5>Customizing a Dialog</h5>
-            <p><i>props</i> option is used to customize the dynamically generated Dialog, refer to the <router-link to="/dialog">Dialog</router-link> documentation for the whole list of options.</p>
+        <h5>Customizing a Dialog</h5>
+        <p><i>props</i> option is used to customize the dynamically generated Dialog, refer to the <router-link to="/dialog">Dialog</router-link> documentation for the whole list of options.</p>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import { h } from 'vue';
 import Button from 'primevue/button';
 import ProductListDemo from './ProductListDemo';
@@ -203,120 +202,119 @@ export default {
 }
 </code></pre>
 
-            <h5>DialogService API</h5>
-            <p>DialogService is the main entry point to open a dialog and load any content within.</p>
+        <h5>DialogService API</h5>
+        <p>DialogService is the main entry point to open a dialog and load any content within.</p>
 
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>open</td>
-                            <td>
-                                content: The component to load<br />
-                                options: Configuration of the Dialog
-                            </td>
-                            <td>Creates a dialog dynamically with the given options and loads the component. See the <i>Dialog Open Configuration API</i> section below for the avaiable properties.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>open</td>
+                        <td>
+                            content: The component to load<br />
+                            options: Configuration of the Dialog
+                        </td>
+                        <td>Creates a dialog dynamically with the given options and loads the component. See the <i>Dialog Open Configuration API</i> section below for the avaiable properties.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dialog Open Configuration API</h5>
-            <p>Options to configure a dynamically loaded Dialog including Dialog props, data to pass and callback to execute on hide.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>props</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Properties of a dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>data</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Data to pass to the loaded component.</td>
-                        </tr>
-                        <tr>
-                            <td>templates</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Templates of a dialog including, <strong>header</strong> and <strong>footer</strong>.</td>
-                        </tr>
-                        <tr>
-                            <td>onClose</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function callback to invoke when dialog is closed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Dialog Open Configuration API</h5>
+        <p>Options to configure a dynamically loaded Dialog including Dialog props, data to pass and callback to execute on hide.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>props</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Properties of a dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>data</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Data to pass to the loaded component.</td>
+                    </tr>
+                    <tr>
+                        <td>templates</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Templates of a dialog including, <strong>header</strong> and <strong>footer</strong>.</td>
+                    </tr>
+                    <tr>
+                        <td>onClose</td>
+                        <td>function</td>
+                        <td>null</td>
+                        <td>Function callback to invoke when dialog is closed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dialog Ref API</h5>
-            <p>Reference to the dynamic dialog that can be used to access the passed data and close the dialog with the option of passing data back to the caller.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>content</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Loaded content of a dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>options</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Options used to open a dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>data</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Data passed to the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>close</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function to close a dialog.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Dialog Ref API</h5>
+        <p>Reference to the dynamic dialog that can be used to access the passed data and close the dialog with the option of passing data back to the caller.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>content</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Loaded content of a dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>options</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Options used to open a dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>data</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Data passed to the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>close</td>
+                        <td>function</td>
+                        <td>null</td>
+                        <td>Function to close a dialog.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <p>DynamicDialog uses the Dialog component internally, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
+        <h5>Accessibility</h5>
+        <p>DynamicDialog uses the Dialog component internally, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/editor/EditorDoc.vue

@@ -1,29 +1,28 @@
 <template>
-    <ClientOnly
-        ><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>
+    <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';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/editor/editor.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>A model can be bound using the standard v-model directive.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>A model can be bound using the standard v-model directive.</p>
+        <pre v-code><code>
 &lt;Editor v-model="value" editorStyle="height: 320px"/&gt;
 
 </code></pre>
 
-            <h5>Toolbar</h5>
-            <p>Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to <a href="http://quilljs.com/docs/modules/toolbar/">Quill documentation</a> for available controls.</p>
-            <pre v-code><code>
+        <h5>Toolbar</h5>
+        <p>Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to <a href="http://quilljs.com/docs/modules/toolbar/">Quill documentation</a> for available controls.</p>
+        <pre v-code><code>
 &lt;Editor v-model="value" editorStyle="height: 320px"&gt;
 	&lt;template #toolbar&gt;
 		&lt;span class="ql-formats"&gt;
@@ -36,164 +35,163 @@ import Editor from 'primevue/editor';
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Value of the content.</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Placeholder text to show when editor is empty.</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to instantiate the editor to readonly mode.</td>
-                        </tr>
-                        <tr>
-                            <td>formats</td>
-                            <td>string[]</td>
-                            <td>null</td>
-                            <td>Whitelist of formats to display, see <a href="http://quilljs.com/docs/formats/">here</a> for available options.</td>
-                        </tr>
-                        <tr>
-                            <td>editorStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the container.</td>
-                        </tr>
-                        <tr>
-                            <td>modules</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Modules configuration, see <a href="http://quilljs.com/docs/modules/">here</a> for available options.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Value of the content.</td>
+                    </tr>
+                    <tr>
+                        <td>placeholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Placeholder text to show when editor is empty.</td>
+                    </tr>
+                    <tr>
+                        <td>readonly</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to instantiate the editor to readonly mode.</td>
+                    </tr>
+                    <tr>
+                        <td>formats</td>
+                        <td>string[]</td>
+                        <td>null</td>
+                        <td>Whitelist of formats to display, see <a href="http://quilljs.com/docs/formats/">here</a> for available options.</td>
+                    </tr>
+                    <tr>
+                        <td>editorStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the container.</td>
+                    </tr>
+                    <tr>
+                        <td>modules</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Modules configuration, see <a href="http://quilljs.com/docs/modules/">here</a> for available options.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>text-change</td>
-                            <td>
-                                event.delta: Representation of the change.<br />
-                                event.source: Source of change. Will be either "user" or "api".<br />
-                                event.htmlValue: Current value as html.<br />
-                                event.textValue: Current value as text.<br />
-                                event.instance: Text editor instance.
-                            </td>
-                            <td>Callback to invoke when text of editor changes.</td>
-                        </tr>
-                        <tr>
-                            <td>selection-change</td>
-                            <td>
-                                event.range: Representation of the selection boundaries.<br />
-                                event.oldRange: Representation of the previous selection boundaries.<br />
-                                event.source: Source of change. Will be either "user" or "api".<br />
-                                event.htmlValue: Current value as html.<br />
-                                event.textValue: Current value as text.<br />
-                                event.instance: Text editor instance.
-                            </td>
-                            <td>Callback to invoke when selection of the text changes.</td>
-                        </tr>
-                        <tr>
-                            <td>load</td>
-                            <td>event.instance: Quill instance</td>
-                            <td>Callback to invoke when the quill modules are loaded.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>text-change</td>
+                        <td>
+                            event.delta: Representation of the change.<br />
+                            event.source: Source of change. Will be either "user" or "api".<br />
+                            event.htmlValue: Current value as html.<br />
+                            event.textValue: Current value as text.<br />
+                            event.instance: Text editor instance.
+                        </td>
+                        <td>Callback to invoke when text of editor changes.</td>
+                    </tr>
+                    <tr>
+                        <td>selection-change</td>
+                        <td>
+                            event.range: Representation of the selection boundaries.<br />
+                            event.oldRange: Representation of the previous selection boundaries.<br />
+                            event.source: Source of change. Will be either "user" or "api".<br />
+                            event.htmlValue: Current value as html.<br />
+                            event.textValue: Current value as text.<br />
+                            event.instance: Text editor instance.
+                        </td>
+                        <td>Callback to invoke when selection of the text changes.</td>
+                    </tr>
+                    <tr>
+                        <td>load</td>
+                        <td>event.instance: Quill instance</td>
+                        <td>Callback to invoke when the quill modules are loaded.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>toolbar</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>toolbar</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <p>Refer to <a href="http://beta.quilljs.com/docs/api/#events">Quill documentation</a> for more information.</p>
+        <p>Refer to <a href="http://beta.quilljs.com/docs/api/#events">Quill documentation</a> for more information.</p>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-editor-container</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-editor-toolbar</td>
-                            <td>Toolbar of the editor</td>
-                        </tr>
-                        <tr>
-                            <td>p-editor-content</td>
-                            <td>Editable area</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-editor-container</td>
+                        <td>Container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-editor-toolbar</td>
+                        <td>Toolbar of the editor</td>
+                    </tr>
+                    <tr>
+                        <td>p-editor-content</td>
+                        <td>Editable area</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <p>
-                Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers. One known limitation is the lack of arrow key support for
-                <a href="https://github.com/quilljs/quill/issues/1031">dropdowns</a> in the toolbar that may be overcome with a custom toolbar.
-            </p>
+        <h5>Accessibility</h5>
+        <p>
+            Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers. One known limitation is the lack of arrow key support for
+            <a href="https://github.com/quilljs/quill/issues/1031">dropdowns</a> in the toolbar that may be overcome with a custom toolbar.
+        </p>
 
-            <h5>Dependencies</h5>
-            <p><a href="http://quilljs.com">Quill</a> Editor 1.3+.</p>
-            <p>Resources of quill needs to be added to your application.</p>
-            <pre v-code><code>
+        <h5>Dependencies</h5>
+        <p><a href="http://quilljs.com">Quill</a> Editor 1.3+.</p>
+        <p>Resources of quill needs to be added to your application.</p>
+        <pre v-code><code>
 npm install quill --save
 
 </code></pre>
-        </AppDoc></ClientOnly
-    >
+    </AppDoc>
 </template>
 
 <script>

pages/fieldset/FieldsetDoc.vue

@@ -1,22 +1,21 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Fieldset from 'primevue/fieldset';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/fieldset/fieldset.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Fieldset is a container component that accepts content as its children.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Fieldset is a container component that accepts content as its children.</p>
+        <pre v-code><code>
 &lt;Fieldset legend="Godfather I"&gt;
 	The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
 	His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
@@ -26,9 +25,9 @@ import Fieldset from 'primevue/fieldset';
 
 </code></pre>
 
-            <h5>Custom Header</h5>
-            <p>Header of the panel is either defined with the <i>legend</i> property or the legend template.</p>
-            <pre v-code><code>
+        <h5>Custom Header</h5>
+        <p>Header of the panel is either defined with the <i>legend</i> property or the legend template.</p>
+        <pre v-code><code>
 &lt;Fieldset&gt;
     &lt;template #legend&gt;
         Header Content
@@ -38,9 +37,9 @@ import Fieldset from 'primevue/fieldset';
 
 </code></pre>
 
-            <h5>Toggleable</h5>
-            <p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p>
-            <pre v-code><code>
+        <h5>Toggleable</h5>
+        <p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p>
+        <pre v-code><code>
 &lt;Fieldset legend="Godfather I" :toggleable="true"&gt;
 	The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
 	His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
@@ -50,16 +49,16 @@ import Fieldset from 'primevue/fieldset';
 
 </code></pre>
 
-            <p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
-            <pre v-code><code>
+        <p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
+        <pre v-code><code>
 &lt;Fieldset legend="Header Text" :toggleable="true" :collapsed="true"&gt;
 	Content
 &lt;/Fieldset&gt;
 
 </code></pre>
 
-            <p>Use the v-model directive to enable two-way binding.</p>
-            <pre v-code><code>
+        <p>Use the v-model directive to enable two-way binding.</p>
+        <pre v-code><code>
 &lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt;
 &lt;Fieldset legend="Header Text" :toggleable="true" v-model:collapsed="isCollapsed"&gt;
 	Content
@@ -67,162 +66,161 @@ import Fieldset from 'primevue/fieldset';
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>legend</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Header text of the fieldset.</td>
-                        </tr>
-                        <tr>
-                            <td>toggleable</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>When specified, content can toggled by clicking the legend.</td>
-                        </tr>
-                        <tr>
-                            <td>collapsed</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Defines the default visibility state of the content.</td>
-                        </tr>
-                        <tr>
-                            <td>toggleButtonProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass the custom value to read for the anchor inside the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>legend</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Header text of the fieldset.</td>
+                    </tr>
+                    <tr>
+                        <td>toggleable</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>When specified, content can toggled by clicking the legend.</td>
+                    </tr>
+                    <tr>
+                        <td>collapsed</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>Defines the default visibility state of the content.</td>
+                    </tr>
+                    <tr>
+                        <td>toggleButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass the custom value to read for the anchor inside the component.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>toggle</td>
-                            <td>
-                                event.originalEvent: browser event <br />
-                                event.value: collapsed state as a boolean
-                            </td>
-                            <td>Callback to invoke when a tab gets expanded or collapsed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>toggle</td>
+                        <td>
+                            event.originalEvent: browser event <br />
+                            event.value: collapsed state as a boolean
+                        </td>
+                        <td>Callback to invoke when a tab gets expanded or collapsed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>legend</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>legend</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-fieldset</td>
-                            <td>Fieldset element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fieldset-toggleable</td>
-                            <td>Toggleable fieldset element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fieldset-legend</td>
-                            <td>Legend element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fieldset-content</td>
-                            <td>Content element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-fieldset</td>
+                        <td>Fieldset element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fieldset-toggleable</td>
+                        <td>Toggleable fieldset element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fieldset-legend</td>
+                        <td>Legend element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fieldset-content</td>
+                        <td>Content element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <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
-                <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>
+        <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
+            <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>
 
-            <h6>Content Toggle Button Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the next the focusable element in the page tab sequence.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>tab</i></td>
-                            <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Toggles the visibility of the content.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Toggles the visibility of the content.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Content Toggle Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/fileupload/FileUploadDoc.vue

@@ -1,91 +1,90 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="FileUploadDemo" :sources="sources" github="fileupload/FileUploadDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="FileUploadDemo" :sources="sources" github="fileupload/FileUploadDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import FileUpload from 'primevue/fileupload';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/fileupload/fileupload.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>FileUpload requires a <i>url</i> property as the upload target and a <i>name</i> to identify the files at backend.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>FileUpload requires a <i>url</i> property as the upload target and a <i>name</i> to identify the files at backend.</p>
+        <pre v-code><code>
 &lt;FileUpload name="demo[]" url="./upload" /&gt;
 
 </code></pre>
 
-            <h5>Multiple Uploads</h5>
-            <p>Only one file can be selected at a time by default, to allow selecting multiple files at once enable <i>multiple</i> option.</p>
-            <pre v-code><code>
+        <h5>Multiple Uploads</h5>
+        <p>Only one file can be selected at a time by default, to allow selecting multiple files at once enable <i>multiple</i> option.</p>
+        <pre v-code><code>
 &lt;FileUpload name="demo[]" url="./upload" :multiple="true" /&gt;
 
 </code></pre>
 
-            <h5>Basic UI</h5>
-            <p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
-            <pre v-code><code>
+        <h5>Basic UI</h5>
+        <p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
+        <pre v-code><code>
 &lt;FileUpload mode="basic" name="demo[]" url="./upload" /&gt;
 
 </code></pre>
 
-            <h5>DragDrop</h5>
-            <p>File selection can also be done by dragging and dropping from the filesystem to the content section of the component.</p>
+        <h5>DragDrop</h5>
+        <p>File selection can also be done by dragging and dropping from the filesystem to the content section of the component.</p>
 
-            <h5>Auto Uploads</h5>
-            <p>When <i>auto</i> property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p>
-            <pre v-code><code>
+        <h5>Auto Uploads</h5>
+        <p>When <i>auto</i> property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p>
+        <pre v-code><code>
 &lt;FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" /&gt;
 
 </code></pre>
 
-            <h5>File Types</h5>
-            <p>Selectable file types can be restricted with <i>accept</i> property, example below only allows images to be uploaded. Read more about other possible values <a href="https://www.w3schools.com/tags/att_input_accept.asp"> here</a>.</p>
-            <pre v-code><code>
+        <h5>File Types</h5>
+        <p>Selectable file types can be restricted with <i>accept</i> property, example below only allows images to be uploaded. Read more about other possible values <a href="https://www.w3schools.com/tags/att_input_accept.asp"> here</a>.</p>
+        <pre v-code><code>
 &lt;FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" /&gt;
 
 </code></pre>
 
-            <h5>File Size and File Limit</h5>
-            <p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes. Similarly <i>fileLimit</i> is available to restrict the number of files to be uploaded.</p>
-            <pre v-code><code>
+        <h5>File Size and File Limit</h5>
+        <p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes. Similarly <i>fileLimit</i> is available to restrict the number of files to be uploaded.</p>
+        <pre v-code><code>
 &lt;FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" :fileLimit="3" /&gt;
 
 </code></pre>
 
-            <p>In order to customize the default messages use <i>invalidFileSizeMessage</i> and <i>invalidFileLimitMessage</i> options where &#123;0&#125; placeholder refers to the filename and &#123;1&#125; the file size.</p>
-            <ul>
-                <li>invalidFileSizeMessage: '&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;.'</li>
-                <li>invalidFileLimitMessage: 'Maximum number of files exceeded, limit is &#123;0&#125; at most.'</li>
-            </ul>
+        <p>In order to customize the default messages use <i>invalidFileSizeMessage</i> and <i>invalidFileLimitMessage</i> options where &#123;0&#125; placeholder refers to the filename and &#123;1&#125; the file size.</p>
+        <ul>
+            <li>invalidFileSizeMessage: '&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;.'</li>
+            <li>invalidFileLimitMessage: 'Maximum number of files exceeded, limit is &#123;0&#125; at most.'</li>
+        </ul>
 
-            <h5>Request Customization</h5>
-            <p>XHR request to upload the files can be customized using the before-upload callback that passes the xhr instance and FormData object as event parameters.</p>
+        <h5>Request Customization</h5>
+        <p>XHR request to upload the files can be customized using the before-upload callback that passes the xhr instance and FormData object as event parameters.</p>
 
-            <h5>Custom Upload</h5>
-            <p>Uploading implementation can be overridden by enabling <i>customMode</i> property and defining a custom upload handler event.</p>
-            <pre v-code><code>
+        <h5>Custom Upload</h5>
+        <p>Uploading implementation can be overridden by enabling <i>customMode</i> property and defining a custom upload handler event.</p>
+        <pre v-code><code>
 &lt;FileUpload name="demo[]" :customUpload="true" @uploader="myUploader" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 myUploader(event) {
     //event.files == files to upload
 }
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>FileUpload component is extremely customizable thanks to the templating features, both the <i>header</i> and <i>content</i> sections provide custom slots.</p>
+        <h5>Templating</h5>
+        <p>FileUpload component is extremely customizable thanks to the templating features, both the <i>header</i> and <i>content</i> sections provide custom slots.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles"&gt;
     &lt;template #header="&#123; chooseCallback, uploadCallback, clearCallback, files &#125;"&gt;
         &lt;div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2"&gt;
@@ -138,375 +137,374 @@ myUploader(event) {
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>name</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the request parameter to identify the files at backend.</td>
-                        </tr>
-                        <tr>
-                            <td>url</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Remote url to upload the files.</td>
-                        </tr>
-                        <tr>
-                            <td>mode</td>
-                            <td>string</td>
-                            <td>advanced</td>
-                            <td>Defines the UI of the component, possible values are "advanced" and "basic".</td>
-                        </tr>
-                        <tr>
-                            <td>multiple</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Used to select multiple files at once from file dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>accept</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Pattern to restrict the allowed file types such as "image/*".</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Disables the upload functionality.</td>
-                        </tr>
-                        <tr>
-                            <td>auto</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, upload begins automatically after selection is completed.</td>
-                        </tr>
-                        <tr>
-                            <td>maxFileSize</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Maximum file size allowed in bytes.</td>
-                        </tr>
-                        <tr>
-                            <td>invalidFileSizeMessage</td>
-                            <td>string</td>
-                            <td>"&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;."</td>
-                            <td>Message of the invalid fize size.</td>
-                        </tr>
-                        <tr>
-                            <td>invalidFileLimitMessage</td>
-                            <td>string</td>
-                            <td>Maximum number of files exceeded, limit is &#123;0&#125; at most.</td>
-                            <td>Message to display when number of files to be uploaded exceeeds the limit.</td>
-                        </tr>
-                        <tr>
-                            <td>invalidFileTypeMessage</td>
-                            <td>string</td>
-                            <td>"&#123;0&#125;: Invalid file type, allowed file types: &#123;1&#125;"".</td>
-                            <td>Message of the invalid file type.</td>
-                        </tr>
-                        <tr>
-                            <td>fileLimit</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Maximum number of files that can be uploaded.</td>
-                        </tr>
-                        <tr>
-                            <td>withCredentials</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.</td>
-                        </tr>
-                        <tr>
-                            <td>previewWidth</td>
-                            <td>number</td>
-                            <td>50</td>
-                            <td>Width of the image thumbnail in pixels.</td>
-                        </tr>
-                        <tr>
-                            <td>chooseLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label of the choose button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>uploadLabel</td>
-                            <td>string</td>
-                            <td>Upload</td>
-                            <td>Label of the upload button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>cancelLabel</td>
-                            <td>string</td>
-                            <td>Cancel</td>
-                            <td>Label of the cancel button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>customUpload</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>showUploadButton</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show the upload button.</td>
-                        </tr>
-                        <tr>
-                            <td>showCancelButton</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show the cancel button.</td>
-                        </tr>
-                        <tr>
-                            <td>chooseIcon</td>
-                            <td>string</td>
-                            <td>pi pi-plus</td>
-                            <td>Icon of the choose button.</td>
-                        </tr>
-                        <tr>
-                            <td>uploadIcon</td>
-                            <td>string</td>
-                            <td>pi pi-upload</td>
-                            <td>Icon of the upload button.</td>
-                        </tr>
-                        <tr>
-                            <td>cancelIcon</td>
-                            <td>string</td>
-                            <td>pi pi-times</td>
-                            <td>Icon of the cancel button.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>class</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>name</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the request parameter to identify the files at backend.</td>
+                    </tr>
+                    <tr>
+                        <td>url</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Remote url to upload the files.</td>
+                    </tr>
+                    <tr>
+                        <td>mode</td>
+                        <td>string</td>
+                        <td>advanced</td>
+                        <td>Defines the UI of the component, possible values are "advanced" and "basic".</td>
+                    </tr>
+                    <tr>
+                        <td>multiple</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Used to select multiple files at once from file dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>accept</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Pattern to restrict the allowed file types such as "image/*".</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Disables the upload functionality.</td>
+                    </tr>
+                    <tr>
+                        <td>auto</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, upload begins automatically after selection is completed.</td>
+                    </tr>
+                    <tr>
+                        <td>maxFileSize</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Maximum file size allowed in bytes.</td>
+                    </tr>
+                    <tr>
+                        <td>invalidFileSizeMessage</td>
+                        <td>string</td>
+                        <td>"&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;."</td>
+                        <td>Message of the invalid fize size.</td>
+                    </tr>
+                    <tr>
+                        <td>invalidFileLimitMessage</td>
+                        <td>string</td>
+                        <td>Maximum number of files exceeded, limit is &#123;0&#125; at most.</td>
+                        <td>Message to display when number of files to be uploaded exceeeds the limit.</td>
+                    </tr>
+                    <tr>
+                        <td>invalidFileTypeMessage</td>
+                        <td>string</td>
+                        <td>"&#123;0&#125;: Invalid file type, allowed file types: &#123;1&#125;"".</td>
+                        <td>Message of the invalid file type.</td>
+                    </tr>
+                    <tr>
+                        <td>fileLimit</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Maximum number of files that can be uploaded.</td>
+                    </tr>
+                    <tr>
+                        <td>withCredentials</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.</td>
+                    </tr>
+                    <tr>
+                        <td>previewWidth</td>
+                        <td>number</td>
+                        <td>50</td>
+                        <td>Width of the image thumbnail in pixels.</td>
+                    </tr>
+                    <tr>
+                        <td>chooseLabel</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Label of the choose button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>uploadLabel</td>
+                        <td>string</td>
+                        <td>Upload</td>
+                        <td>Label of the upload button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>cancelLabel</td>
+                        <td>string</td>
+                        <td>Cancel</td>
+                        <td>Label of the cancel button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>customUpload</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>showUploadButton</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to show the upload button.</td>
+                    </tr>
+                    <tr>
+                        <td>showCancelButton</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to show the cancel button.</td>
+                    </tr>
+                    <tr>
+                        <td>chooseIcon</td>
+                        <td>string</td>
+                        <td>pi pi-plus</td>
+                        <td>Icon of the choose button.</td>
+                    </tr>
+                    <tr>
+                        <td>uploadIcon</td>
+                        <td>string</td>
+                        <td>pi pi-upload</td>
+                        <td>Icon of the upload button.</td>
+                    </tr>
+                    <tr>
+                        <td>cancelIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times</td>
+                        <td>Icon of the cancel button.</td>
+                    </tr>
+                    <tr>
+                        <td>style</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>class</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the component.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div classe="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>before-upload</td>
-                            <td>
-                                event.xhr: XmlHttpRequest instance. <br />
-                                event.formData: FormData object.
-                            </td>
-                            <td>Callback to invoke before file upload begins to customize the request such as post parameters before the files.</td>
-                        </tr>
-                        <tr>
-                            <td>before-send</td>
-                            <td>
-                                event.xhr: XmlHttpRequest instance. <br />
-                                event.formData: FormData object.
-                            </td>
-                            <td>Callback to invoke before file send begins to customize the request such as adding headers.</td>
-                        </tr>
-                        <tr>
-                            <td>upload</td>
-                            <td>
-                                event.xhr: XmlHttpRequest instance.<br />
-                                event.files: Uploaded files.
-                            </td>
-                            <td>Callback to invoke when file upload is complete.</td>
-                        </tr>
-                        <tr>
-                            <td>error</td>
-                            <td>
-                                event.xhr: XmlHttpRequest instance.<br />
-                                event.files: Files that are not uploaded.
-                            </td>
-                            <td>Callback to invoke if file upload fails.</td>
-                        </tr>
-                        <tr>
-                            <td>clear</td>
-                            <td>-.</td>
-                            <td>Callback to invoke when files in queue are removed without uploading.</td>
-                        </tr>
-                        <tr>
-                            <td>select</td>
-                            <td>
-                                event.originalEvent: Original browser event. <br />
-                                event.files: List of selected files.
-                            </td>
-                            <td>Callback to invoke when files are selected.</td>
-                        </tr>
-                        <tr>
-                            <td>progress</td>
-                            <td>
-                                event.originalEvent: Original browser event. <br />
-                                event.progress: Calculated progress value.
-                            </td>
-                            <td>Callback to invoke when files are being uploaded.</td>
-                        </tr>
-                        <tr>
-                            <td>uploader</td>
-                            <td>event.files: List of selected files.</td>
-                            <td>Callback to invoke to implement a custom upload.</td>
-                        </tr>
-                        <tr>
-                            <td>remove</td>
-                            <td>
-                                event.file: Removed file. <br />
-                                event.files: Remaining files to be uploaded.
-                            </td>
-                            <td>Callback to invoke when a single file is removed from the file list to upload.</td>
-                        </tr>
-                        <tr>
-                            <td>removeUploadedFile</td>
-                            <td>
-                                event.file: Removed uploaded file. <br />
-                                event.files: Remaining uploaded files.
-                            </td>
-                            <td>Callback to invoke when a single uploaded file is removed from the uploaded file list.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div classe="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>before-upload</td>
+                        <td>
+                            event.xhr: XmlHttpRequest instance. <br />
+                            event.formData: FormData object.
+                        </td>
+                        <td>Callback to invoke before file upload begins to customize the request such as post parameters before the files.</td>
+                    </tr>
+                    <tr>
+                        <td>before-send</td>
+                        <td>
+                            event.xhr: XmlHttpRequest instance. <br />
+                            event.formData: FormData object.
+                        </td>
+                        <td>Callback to invoke before file send begins to customize the request such as adding headers.</td>
+                    </tr>
+                    <tr>
+                        <td>upload</td>
+                        <td>
+                            event.xhr: XmlHttpRequest instance.<br />
+                            event.files: Uploaded files.
+                        </td>
+                        <td>Callback to invoke when file upload is complete.</td>
+                    </tr>
+                    <tr>
+                        <td>error</td>
+                        <td>
+                            event.xhr: XmlHttpRequest instance.<br />
+                            event.files: Files that are not uploaded.
+                        </td>
+                        <td>Callback to invoke if file upload fails.</td>
+                    </tr>
+                    <tr>
+                        <td>clear</td>
+                        <td>-.</td>
+                        <td>Callback to invoke when files in queue are removed without uploading.</td>
+                    </tr>
+                    <tr>
+                        <td>select</td>
+                        <td>
+                            event.originalEvent: Original browser event. <br />
+                            event.files: List of selected files.
+                        </td>
+                        <td>Callback to invoke when files are selected.</td>
+                    </tr>
+                    <tr>
+                        <td>progress</td>
+                        <td>
+                            event.originalEvent: Original browser event. <br />
+                            event.progress: Calculated progress value.
+                        </td>
+                        <td>Callback to invoke when files are being uploaded.</td>
+                    </tr>
+                    <tr>
+                        <td>uploader</td>
+                        <td>event.files: List of selected files.</td>
+                        <td>Callback to invoke to implement a custom upload.</td>
+                    </tr>
+                    <tr>
+                        <td>remove</td>
+                        <td>
+                            event.file: Removed file. <br />
+                            event.files: Remaining files to be uploaded.
+                        </td>
+                        <td>Callback to invoke when a single file is removed from the file list to upload.</td>
+                    </tr>
+                    <tr>
+                        <td>removeUploadedFile</td>
+                        <td>
+                            event.file: Removed uploaded file. <br />
+                            event.files: Remaining uploaded files.
+                        </td>
+                        <td>Callback to invoke when a single uploaded file is removed from the uploaded file list.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>
-                                files: Files to upload <br />
-                                uploadedFiles: Uploaded Files <br />
-                                chooseCallback: Choose function <br />
-                                uploadCallback: Upload function <br />
-                                clearCallback: Clear function
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>
-                                files: Files to upload <br />
-                                uploadedFiles: Uploaded Files <br />
-                                progress: Uploaded progress as number <br />
-                                messages: Status messages about upload process <br />
-                                removeFileCallback(index): Function to remove a file <br />
-                                removeUploadedFileCallback(index): Function to remove an uploaded file
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>empty</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>
+                            files: Files to upload <br />
+                            uploadedFiles: Uploaded Files <br />
+                            chooseCallback: Choose function <br />
+                            uploadCallback: Upload function <br />
+                            clearCallback: Clear function
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>content</td>
+                        <td>
+                            files: Files to upload <br />
+                            uploadedFiles: Uploaded Files <br />
+                            progress: Uploaded progress as number <br />
+                            messages: Status messages about upload process <br />
+                            removeFileCallback(index): Function to remove a file <br />
+                            removeUploadedFileCallback(index): Function to remove an uploaded file
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>empty</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-fileupload</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-basic</td>
-                            <td>Container element in basic mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-advanced</td>
-                            <td>Container element in advanced mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-buttonbar</td>
-                            <td>Header containing the buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-content</td>
-                            <td>Content section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-file</td>
-                            <td>File item.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-file-thumbnail</td>
-                            <td>Image preview of a file.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-file-details</td>
-                            <td>Container of file details.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-file-name</td>
-                            <td>File name element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-file-size</td>
-                            <td>File size element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-file-badge</td>
-                            <td>File badge element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-file-actions</td>
-                            <td>Container of file actions.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-file-remove</td>
-                            <td>Button to remove a file.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-empty</td>
-                            <td>Container of the empty slot.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-fileupload</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-basic</td>
+                        <td>Container element in basic mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-advanced</td>
+                        <td>Container element in advanced mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-buttonbar</td>
+                        <td>Header containing the buttons.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-content</td>
+                        <td>Content section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-file</td>
+                        <td>File item.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-file-thumbnail</td>
+                        <td>Image preview of a file.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-file-details</td>
+                        <td>Container of file details.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-file-name</td>
+                        <td>File name element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-file-size</td>
+                        <td>File size element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-file-badge</td>
+                        <td>File badge element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-file-actions</td>
+                        <td>Container of file actions.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-file-remove</td>
+                        <td>Button to remove a file.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-empty</td>
+                        <td>Container of the empty slot.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/filterservice/FilterServiceDoc.vue

@@ -1,21 +1,20 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="filterservice/FilterServiceDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <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';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Filters are accessed with <i>FilterService.filters</i>.</p>
-            <pre v-code.script><code>
+        <h5>Getting Started</h5>
+        <p>Filters are accessed with <i>FilterService.filters</i>.</p>
+        <pre v-code.script><code>
 const value = 'PrimeVue';
 
 FilterService.filters.equals(value, 'Vue');                            //false
@@ -30,9 +29,9 @@ FilterService.filters.in(value, ['PrimeFaces', 'PrimeVue']);           //true
 
 </code></pre>
 
-            <h5>Custom Constraint</h5>
-            <p>FilterService can be extended by adding new constraints using the <span>register</span> function.</p>
-            <pre v-code.script><code>
+        <h5>Custom Constraint</h5>
+        <p>FilterService can be extended by adding new constraints using the <span>register</span> function.</p>
+        <pre v-code.script><code>
 FilterService.register('isPrimeNumber', (value, filter): boolean => &#123;
     if (filter === undefined || filter === null || filter.trim() === '') &#123;
         return true;
@@ -51,7 +50,147 @@ FilterService.filters['isPrimeNumber'](568985673);              //false
 
 </code></pre>
 
-            <h5>Built-in Constraints</h5>
+        <h5>Built-in Constraints</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>startsWith</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value starts with the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>contains</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value contains the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>endsWith</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value ends with the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>equals</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value equals the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>notEquals</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value does not equal the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>in</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter[]: An array of filter values<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value contains the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>lt</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value is less than the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>lte</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value is less than or equals to the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>gt</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value is greater than the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>gte</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value is greater than or equals to the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>is</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value equals the filter value, alias to equals</td>
+                    </tr>
+                    <tr>
+                        <td>isNot</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value does not equal the filter value, alias to notEquals.</td>
+                    </tr>
+                    <tr>
+                        <td>before</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the date value is before the filter date.</td>
+                    </tr>
+                    <tr>
+                        <td>after</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the date value is after the filter date.</td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <h5>FilterService API</h5>
             <div class="doc-tablewrapper">
                 <table class="doc-table">
                     <thead>
@@ -63,178 +202,37 @@ FilterService.filters['isPrimeNumber'](568985673);              //false
                     </thead>
                     <tbody>
                         <tr>
-                            <td>startsWith</td>
+                            <td>filter</td>
                             <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
+                                value[]: An array of values to filter<br />
+                                fields[]: An array of properties in the value object<br />
+                                filterValue: Filter value<br />
+                                filterMatchMode: Constraint<br />
                                 filterLocale: Locale to use in filtering
                             </td>
-                            <td>Whether the value starts with the filter value</td>
+                            <td>Whether the property values of the given value collection matches the filter.</td>
                         </tr>
                         <tr>
-                            <td>contains</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value contains the filter value</td>
+                            <td>filters</td>
+                            <td>-</td>
+                            <td>Property to access constraints collection.</td>
                         </tr>
                         <tr>
-                            <td>endsWith</td>
+                            <td>register</td>
                             <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
+                                name: string <br />
+                                fn: Filter callback
                             </td>
-                            <td>Whether the value ends with the filter value</td>
-                        </tr>
-                        <tr>
-                            <td>equals</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value equals the filter value</td>
-                        </tr>
-                        <tr>
-                            <td>notEquals</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value does not equal the filter value</td>
-                        </tr>
-                        <tr>
-                            <td>in</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter[]: An array of filter values<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value contains the filter value</td>
-                        </tr>
-                        <tr>
-                            <td>lt</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value is less than the filter value</td>
-                        </tr>
-                        <tr>
-                            <td>lte</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value is less than or equals to the filter value</td>
-                        </tr>
-                        <tr>
-                            <td>gt</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value is greater than the filter value</td>
-                        </tr>
-                        <tr>
-                            <td>gte</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value is greater than or equals to the filter value</td>
-                        </tr>
-                        <tr>
-                            <td>is</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value equals the filter value, alias to equals</td>
-                        </tr>
-                        <tr>
-                            <td>isNot</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value does not equal the filter value, alias to notEquals.</td>
-                        </tr>
-                        <tr>
-                            <td>before</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the date value is before the filter date.</td>
-                        </tr>
-                        <tr>
-                            <td>after</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the date value is after the filter date.</td>
+                            <td>Registers a new constraint in filters.</td>
                         </tr>
                     </tbody>
                 </table>
-
-                <h5>FilterService API</h5>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Parameters</th>
-                                <th>Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>filter</td>
-                                <td>
-                                    value[]: An array of values to filter<br />
-                                    fields[]: An array of properties in the value object<br />
-                                    filterValue: Filter value<br />
-                                    filterMatchMode: Constraint<br />
-                                    filterLocale: Locale to use in filtering
-                                </td>
-                                <td>Whether the property values of the given value collection matches the filter.</td>
-                            </tr>
-                            <tr>
-                                <td>filters</td>
-                                <td>-</td>
-                                <td>Property to access constraints collection.</td>
-                            </tr>
-                            <tr>
-                                <td>register</td>
-                                <td>
-                                    name: string <br />
-                                    fn: Filter callback
-                                </td>
-                                <td>Registers a new constraint in filters.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
             </div>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </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,66 +1,64 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="FocusTrapDemo" :sources="sources" github="focustrap/FocusTrapDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="FocusTrapDemo" :sources="sources" github="focustrap/FocusTrapDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import FocusTrap from 'primevue/focustrap';
 
 app.directive('focustrap', FocusTrap);
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/focustrap/focustrap.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 directives: {
     'focustrap': FocusTrap
 }
 
 </code></pre>
 
-            <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>
+        <h5>Getting Started</h5>
+        <p>FocusTrap is applied to a container element with the v-focustrap directive.</p>
+        <pre v-code><code>
 &lt;div v-focustrap&gt;
     //content
 &lt;/div&gt;
-</template>
+
 </code></pre>
 
-            <h5>Properties</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When set as true, focus wouldn't be managed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When set as true, focus wouldn't be managed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>Directive has no events.</p>
+        <h5>Events</h5>
+        <p>Directive has no events.</p>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>

pages/fullcalendar/FullCalendarDoc.vue

@@ -1,17 +1,15 @@
 <template>
-    <ClientOnly
-        ><AppDoc
-            name="FullCalendarDemo"
-            :sources="sources"
-            :service="['EventService']"
-            :data="['events']"
-            github="fullcalendar/FullCalendarDemo.vue"
-            :dependencies="{ '@fullcalendar/core': '^5.7.2', '@fullcalendar/vue3': '^5.7.2', '@fullcalendar/daygrid': '^5.7.2', '@fullcalendar/interaction': '^5.7.2', '@fullcalendar/timegrid': '^5.7.2' }"
-            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
+        name="FullCalendarDemo"
+        :sources="sources"
+        :service="['EventService']"
+        :data="['events']"
+        github="fullcalendar/FullCalendarDemo.vue"
+        :dependencies="{ '@fullcalendar/core': '^5.7.2', '@fullcalendar/vue3': '^5.7.2', '@fullcalendar/daygrid': '^5.7.2', '@fullcalendar/interaction': '^5.7.2', '@fullcalendar/timegrid': '^5.7.2' }"
+        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>
 </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,32 +1,31 @@
 <template>
-    <ClientOnly
-        ><AppDoc name="ImageDemo" :sources="sources" github="image/ImageDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ImageDemo" :sources="sources" github="image/ImageDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Image from 'primevue/image';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/image/image.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Image is used as the native <i>img</i> element and supports all properties that the native element has.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Image is used as the native <i>img</i> element and supports all properties that the native element has.</p>
+        <pre v-code><code>
 &lt;Image src="image1.png" alt="Image Text" /&gt;
 
 </code></pre>
 
-            <h5>Preview</h5>
-            <p>Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.</p>
+        <h5>Preview</h5>
+        <p>Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.</p>
 
-            <h5>Indicator Templating</h5>
-            <p>An eye icon is displayed by default when the image is hovered in preview mode. Use the <i>indicator</i> template for custom content.</p>
-            <pre v-code><code>
+        <h5>Indicator Templating</h5>
+        <p>An eye icon is displayed by default when the image is hovered in preview mode. Use the <i>indicator</i> template for custom content.</p>
+        <pre v-code><code>
 &lt;Image src="image1.png" alt="Image Text"&gt;
     &lt;template #indicator&gt;
         Preview Content
@@ -35,191 +34,190 @@ import Image from 'primevue/image';
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Image passes any valid attribute to the underlying img element, additional attribute is the following.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>preview</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Controls the preview functionality.</td>
-                        </tr>
-                        <tr>
-                            <td>imageStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the image element.</td>
-                        </tr>
-                        <tr>
-                            <td>imageClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the image element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Image passes any valid attribute to the underlying img element, additional attribute is the following.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>preview</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Controls the preview functionality.</td>
+                    </tr>
+                    <tr>
+                        <td>imageStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the image element.</td>
+                    </tr>
+                    <tr>
+                        <td>imageClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the image element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>Any valid event like click and mouseover are passed to the underlying input element. Events below are the additional ones related to the preview functionality.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Triggered when the preview overlay is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Triggered when the preview overlay is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>error</td>
-                            <td>-</td>
-                            <td>Triggered when an error occurs while loading an image file.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <p>Any valid event like click and mouseover are passed to the underlying input element. Events below are the additional ones related to the preview functionality.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Triggered when the preview overlay is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Triggered when the preview overlay is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>error</td>
+                        <td>-</td>
+                        <td>Triggered when an error occurs while loading an image file.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>indicator</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>indicator</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-image</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-image-preview-container</td>
-                            <td>Container element with preview enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>p-image-preview-indicator</td>
-                            <td>Mask layer over the image when hovered.</td>
-                        </tr>
-                        <tr>
-                            <td>p-image-preview-icon</td>
-                            <td>Icon of the preview indicator.</td>
-                        </tr>
-                        <tr>
-                            <td>p-image-mask</td>
-                            <td>Preview overlay container.</td>
-                        </tr>
-                        <tr>
-                            <td>p-image-toolbar</td>
-                            <td>Transformation options container.</td>
-                        </tr>
-                        <tr>
-                            <td>p-image-action</td>
-                            <td>An element inside the toolbar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-image-preview</td>
-                            <td>Image element inside the preview overlay.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-image</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-image-preview-container</td>
+                        <td>Container element with preview enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>p-image-preview-indicator</td>
+                        <td>Mask layer over the image when hovered.</td>
+                    </tr>
+                    <tr>
+                        <td>p-image-preview-icon</td>
+                        <td>Icon of the preview indicator.</td>
+                    </tr>
+                    <tr>
+                        <td>p-image-mask</td>
+                        <td>Preview overlay container.</td>
+                    </tr>
+                    <tr>
+                        <td>p-image-toolbar</td>
+                        <td>Transformation options container.</td>
+                    </tr>
+                    <tr>
+                        <td>p-image-action</td>
+                        <td>An element inside the toolbar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-image-preview</td>
+                        <td>Image element inside the preview overlay.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                The preview button is a native <i>button</i> element with an <i>aria-label</i> that refers to the <i>aria.zoomImage</i> property of the <router-link to="/locale">locale</router-link> API by default, with <i>previewButtonProps</i>
-                you may use your own aria roles and attributes as any valid attribute is passed to the button element implicitly.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            The preview button is a native <i>button</i> element with an <i>aria-label</i> that refers to the <i>aria.zoomImage</i> property of the <router-link to="/locale">locale</router-link> API by default, with <i>previewButtonProps</i>
+            you may use your own aria roles and attributes as any valid attribute is passed to the button element implicitly.
+        </p>
 
-            <p>When preview is active, <i>dialog</i> role with <i>aria-modal</i> is applied to the overlay image container.</p>
+        <p>When preview is active, <i>dialog</i> role with <i>aria-modal</i> is applied to the overlay image container.</p>
 
-            <p>Button controls use <i>aria.rotateRight</i>, <i>aria.rotateLeft</i>, <i>aria.zoomIn</i>, <i>aria.zoomOut</i> and <i>aria.close</i> from the <router-link to="/locale">locale</router-link> API as <i>aria-label</i>.</p>
+        <p>Button controls use <i>aria.rotateRight</i>, <i>aria.rotateLeft</i>, <i>aria.zoomIn</i>, <i>aria.zoomOut</i> and <i>aria.close</i> from the <router-link to="/locale">locale</router-link> API as <i>aria-label</i>.</p>
 
-            <h6>ButtonBar Keyboard Support</h6>
-            <p>When preview is activated, close button receives the initial focus.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <i>tab</i>
-                            </td>
-                            <td>Moves focus through button bar.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>enter</i>
-                            </td>
-                            <td>Activates the button.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>space</i>
-                            </td>
-                            <td>Activates the button.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>esc</i>
-                            </td>
-                            <td>Closes the image preview.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>ButtonBar Keyboard Support</h6>
+        <p>When preview is activated, close button receives the initial focus.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through button bar.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the button.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the button.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>esc</i>
+                        </td>
+                        <td>Closes the image preview.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc></ClientOnly
-    >
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>