From a2ce2d0f7215a3d6559a3b3fc1bdaf3292acf91a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 26 Dec 2023 21:28:43 +0300
Subject: [PATCH 1/5] Add vite and nuxt docs to get started

---
 assets/menu/menu.json                        | 16 ++--
 doc/nuxt/DownloadDoc.vue                     |  8 +-
 doc/nuxt/{ExampleDoc.vue => ExamplesDoc.vue} |  0
 doc/nuxt/ModuleSetupDoc.vue                  | 30 ++++++++
 doc/nuxt/SetupDoc.vue                        | 62 ---------------
 doc/nuxt/StyledModeDoc.vue                   | 81 ++++++++++++++++++++
 doc/nuxt/UnstyledModeDoc.vue                 | 47 ++++++++++++
 doc/nuxt/UsageDoc.vue                        | 23 ++++++
 doc/vite/DownloadDoc.vue                     | 27 +++++++
 doc/vite/ExamplesDoc.vue                     |  9 +++
 doc/vite/PluginDoc.vue                       | 27 +++++++
 doc/vite/StyledModeDoc.vue                   | 44 +++++++++++
 doc/vite/UnstyledModeDoc.vue                 | 44 +++++++++++
 doc/vite/UsageDoc.vue                        | 46 +++++++++++
 doc/vite/videos/CreateVueDoc.vue             | 11 +++
 pages/nuxt/index.vue                         | 60 ++++++++++-----
 pages/vite/index.vue                         | 77 +++++++++++++++++++
 17 files changed, 522 insertions(+), 90 deletions(-)
 rename doc/nuxt/{ExampleDoc.vue => ExamplesDoc.vue} (100%)
 create mode 100644 doc/nuxt/ModuleSetupDoc.vue
 delete mode 100644 doc/nuxt/SetupDoc.vue
 create mode 100644 doc/nuxt/StyledModeDoc.vue
 create mode 100644 doc/nuxt/UnstyledModeDoc.vue
 create mode 100644 doc/nuxt/UsageDoc.vue
 create mode 100644 doc/vite/DownloadDoc.vue
 create mode 100644 doc/vite/ExamplesDoc.vue
 create mode 100644 doc/vite/PluginDoc.vue
 create mode 100644 doc/vite/StyledModeDoc.vue
 create mode 100644 doc/vite/UnstyledModeDoc.vue
 create mode 100644 doc/vite/UsageDoc.vue
 create mode 100644 doc/vite/videos/CreateVueDoc.vue
 create mode 100644 pages/vite/index.vue

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index f597c2e68..6a9f47bd2 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -5,17 +5,21 @@
             "icon": "pi pi-home",
             "children": [
                 {
-                    "name": "Installation",
-                    "to": "/installation"
+                    "name": "Introduction",
+                    "to": "/introduction"
+                },
+                {
+                    "name": "Vite Setup",
+                    "to": "/vite"
+                },
+                {
+                    "name": "Nuxt Setup",
+                    "to": "/nuxt"
                 },
                 {
                     "name": "Configuration",
                     "to": "/configuration"
                 },
-                {
-                    "name": "Nuxt",
-                    "to": "/nuxt"
-                },
                 {
                     "name": "Playground",
                     "to": "/playground"
diff --git a/doc/nuxt/DownloadDoc.vue b/doc/nuxt/DownloadDoc.vue
index 23706c233..f657b1dbb 100644
--- a/doc/nuxt/DownloadDoc.vue
+++ b/doc/nuxt/DownloadDoc.vue
@@ -1,6 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The <a href="https://www.npmjs.com/package/nuxt-primevue" target="_blank" rel="noopener noreferrer">nuxt-primevue</a> package is the official module by PrimeTek.</p>
+        <p>
+            PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a> along with the official
+            <a href="https://www.npmjs.com/package/nuxt-primevue" target="_blank" rel="noopener noreferrer">nuxt-primevue</a> module.
+        </p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
 </template>
@@ -12,12 +15,15 @@ export default {
             code: {
                 basic: `
 # Using npm
+npm install primevue
 npm install --save-dev nuxt-primevue
 
 # Using yarn
+yarn add primevue
 yarn add --dev nuxt-primevue
 
 # Using pnpm
+pnpm add primevue
 pnpm add -D nuxt-primevue
 `
             }
diff --git a/doc/nuxt/ExampleDoc.vue b/doc/nuxt/ExamplesDoc.vue
similarity index 100%
rename from doc/nuxt/ExampleDoc.vue
rename to doc/nuxt/ExamplesDoc.vue
diff --git a/doc/nuxt/ModuleSetupDoc.vue b/doc/nuxt/ModuleSetupDoc.vue
new file mode 100644
index 000000000..335548c4b
--- /dev/null
+++ b/doc/nuxt/ModuleSetupDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            In <i>nuxt.config</i> file, add the <i>nuxt-primevue</i> to the modules section and define <i>primevue</i> object for the configuration of the module. View the <NuxtLink to="/nuxt/#configuration">module configuration</NuxtLink> section
+            for the available list of options.
+        </p>
+        <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default defineNuxtConfig({
+    modules: [
+        'nuxt-primevue'
+    ],
+    primevue: {
+        /* Options */
+    }
+})
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/nuxt/SetupDoc.vue b/doc/nuxt/SetupDoc.vue
deleted file mode 100644
index 1970aba69..000000000
--- a/doc/nuxt/SetupDoc.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The module is enabled by adding <i>nuxt-primevue</i> to the modules option. Configuration values are defined with the <i>primevue</i> property.</p>
-        <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
-        <p>The complete API with the all available configuration options along with the default values.</p>
-        <DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-export default defineNuxtConfig({
-    modules: [
-        'nuxt-primevue'
-    ],
-    primevue: {
-        /* Options */
-    }
-})
-`
-            },
-            code2: {
-                basic: `
-export default defineNuxtConfig({
-    modules: [
-        'nuxt-primevue'
-    ],
-    primevue: {
-        usePrimeVue: true,
-        options: {},
-        importPT: undefined,
-        cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities',
-        components: {
-            prefix: '',
-            name: undefined,
-            include: undefined,
-            exclude: undefined
-        },
-        directives: {
-            prefix: '',
-            name: undefined,
-            include: undefined,
-            exclude: undefined
-        },
-        composables: {
-            prefix: '',
-            name: undefined,
-            include: undefined,
-            exclude: undefined
-        }
-    }
-})
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/nuxt/StyledModeDoc.vue b/doc/nuxt/StyledModeDoc.vue
new file mode 100644
index 000000000..df0bbc777
--- /dev/null
+++ b/doc/nuxt/StyledModeDoc.vue
@@ -0,0 +1,81 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the
+            <NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
+        </p>
+        <p>You may use the <i>app.vue</i> file to import a theme using a script.</p>
+        <DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz />
+        <p>The style section may also be used with <i>@import</i>.</p>
+        <DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz />
+        <p>Another alternative would be the <i>css</i> option in <i>nuxt.config</i>.</p>
+        <DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>
+            The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
+            Normalize, or similar, a custom CSS layer configuration might be necessary with the <i>cssLayerOrder</i> option to make sure primevue layer is defined afterward. This only applies to Styled Mode as Unstyled Mode does not use any default
+            styles or layers. View the <NuxtLink to="/guides/csslayer">CSS Layer</NuxtLink> guide for more information.
+        </p>
+        <DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code5" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+<script>
+import 'primevue/resources/themes/lara-light-green/theme.csss'
+<\/script>
+`
+            },
+            code2: {
+                basic: `
+<style>
+@import url("primevue/resources/themes/lara-light-green/theme.css");
+<\/style>
+`
+            },
+            code3: {
+                basic: `
+export default defineNuxtConfig({
+    modules: [
+        'nuxt-primevue'
+    ],
+    primevue: {
+        /* Options */
+    },
+    css: ['primevue/resources/themes/lara-light-green/theme.css']
+})
+`
+            },
+            code4: {
+                basic: `
+/* Reset CSS */
+@layer reset {
+    button,
+    input {
+        /* CSS to Reset */
+    }
+}
+`
+            },
+            code5: {
+                basic: `
+export default defineNuxtConfig({
+    modules: [
+        'nuxt-primevue'
+    ],
+    primevue: {
+        cssLayerOrder: 'reset,primevue'
+    },
+    css: ['primevue/resources/themes/lara-light-green/theme.css']
+})
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/nuxt/UnstyledModeDoc.vue b/doc/nuxt/UnstyledModeDoc.vue
new file mode 100644
index 000000000..293a593e9
--- /dev/null
+++ b/doc/nuxt/UnstyledModeDoc.vue
@@ -0,0 +1,47 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Unstyled mode is disabled by default for all components. Set <i>unstyled</i> as true to enable it globally using a module configuration. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more information and
+            examples.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>In unstyled mode, you'd need to style the components on your end. If you are using Tailwind CSS, see the <a href="https://tailwind.primevue.org/nuxt/">Tailwind CSS Presets</a> project to get you started.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default defineNuxtConfig({
+    modules: [
+        'nuxt-primevue'
+    ],
+    primevue: {
+        unstyled: true
+    }
+})
+`
+            },
+            code2: {
+                basic: `
+import path from 'path';
+
+export default defineNuxtConfig({
+    modules: [
+        'nuxt-primevue'
+    ],
+    primevue: {
+        unstyled: true,
+        importPT: { from: path.resolve(__dirname, './presets/lara/') }      //import and apply preset   
+    }
+})
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/nuxt/UsageDoc.vue b/doc/nuxt/UsageDoc.vue
new file mode 100644
index 000000000..b6d2625ef
--- /dev/null
+++ b/doc/nuxt/UsageDoc.vue
@@ -0,0 +1,23 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The nuxt-primevue module registers the components automatically so you may start using them instantly. See the <NuxtLink to="/nuxt/#components">Components</NuxtLink> section to customize how the components are loaded and named.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Button label="Check" icon="pi pi-check" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Check" icon="pi pi-check" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/vite/DownloadDoc.vue b/doc/vite/DownloadDoc.vue
new file mode 100644
index 000000000..31b02b26f
--- /dev/null
+++ b/doc/vite/DownloadDoc.vue
@@ -0,0 +1,27 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a>.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+# Using npm
+npm install primevue
+
+# Using yarn
+yarn add primevue
+
+# Using pnpm
+pnpm add primevue
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/vite/ExamplesDoc.vue b/doc/vite/ExamplesDoc.vue
new file mode 100644
index 000000000..14bceb2a1
--- /dev/null
+++ b/doc/vite/ExamplesDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p class="mb-0">
+            We've created various samples for the popular options in the Vue ecosystem. Visit the <a href="https://github.com/primefaces/primevue-examples">primevue-examples</a> repository for more samples including
+            <a href="https://github.com/primefaces/primevue-examples/tree/main/vite-quickstart" target="_blank" rel="noopener noreferrer">vite-quickstart</a> and
+            <a href="https://github.com/primefaces/primevue-examples/tree/main/vite-ts-quickstart" target="_blank" rel="noopener noreferrer">vite-ts-quickstart</a>.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/vite/PluginDoc.vue b/doc/vite/PluginDoc.vue
new file mode 100644
index 000000000..ea56afbd8
--- /dev/null
+++ b/doc/vite/PluginDoc.vue
@@ -0,0 +1,27 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue plugin is required to be installed as an application plugin to set up the default <NuxtLink to="/configuration">configuration</NuxtLink>. The plugin is lightweight, only sets up the configuration object without affecting your
+            application.
+        </p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import { createApp } from 'vue';
+import PrimeVue from 'primevue/config';
+
+const app = createApp(App);
+app.use(PrimeVue);
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/vite/StyledModeDoc.vue b/doc/vite/StyledModeDoc.vue
new file mode 100644
index 000000000..873091b52
--- /dev/null
+++ b/doc/vite/StyledModeDoc.vue
@@ -0,0 +1,44 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the
+            <NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>
+            The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
+            Normalize, or similar, a custom CSS layer configuration might be necessary. This only applies to Styled Mode as Unstyled Mode does not use any default styles or layers. View the <NuxtLink to="/guides/csslayer">CSS Layer</NuxtLink> guide
+            for more information.
+        </p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+//in main.js
+import 'primevue/resources/themes/lara-light-green/theme.css'
+`
+            },
+            code2: {
+                basic: `
+/* Order */
+@layer reset, primevue;
+
+/* Reset CSS */
+@layer reset {
+    button,
+    input {
+        /* CSS to Reset */
+    }
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/vite/UnstyledModeDoc.vue b/doc/vite/UnstyledModeDoc.vue
new file mode 100644
index 000000000..240c65242
--- /dev/null
+++ b/doc/vite/UnstyledModeDoc.vue
@@ -0,0 +1,44 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Unstyled mode is disabled by default for all components. Using the PrimeVue plugin during installation, set <i>unstyled</i> as true to enable it globally. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more
+            information and examples.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>In unstyled mode, you'd need to style the components on your end. If you are using Tailwind CSS, see the <a href="https://tailwind.primevue.org/vite/">Tailwind CSS Presets</a> project to get you started.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { 
+    unstyled: true 
+});
+`
+            },
+            code2: {
+                basic: `
+import { createApp } from 'vue';
+import PrimeVue from 'primevue/config';
+import Lara from '@/presets/lara';      //import preset        
+
+const app = createApp(App);
+app.use(PrimeVue, {
+    unstyled: true,
+    pt: Lara                            //apply preset        
+});
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/vite/UsageDoc.vue b/doc/vite/UsageDoc.vue
new file mode 100644
index 000000000..0683096eb
--- /dev/null
+++ b/doc/vite/UsageDoc.vue
@@ -0,0 +1,46 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Each component can be imported and registered individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Button label="Check" icon="pi pi-check" />
+    </div>
+    <DocSectionCode :code="code" importCode />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Button from "primevue/button"
+
+const app = createApp(App);
+app.component('Button', Button);
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button label="Check" icon="pi pi-check" />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button label="Check" icon="pi pi-check" />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/vite/videos/CreateVueDoc.vue b/doc/vite/videos/CreateVueDoc.vue
new file mode 100644
index 000000000..cd2836e41
--- /dev/null
+++ b/doc/vite/videos/CreateVueDoc.vue
@@ -0,0 +1,11 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            <a alt="Create Vue App" href="https://github.com/vuejs/create-vue">Create-Vue</a>
+            is the recommended way to start a Vite-powered Vue project.
+        </p>
+    </DocSectionText>
+    <div class="video-container">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/FjYesOz95MM" frameborder="0" allowfullscreen></iframe>
+    </div>
+</template>
diff --git a/pages/nuxt/index.vue b/pages/nuxt/index.vue
index 5d8b7051a..4ca835172 100644
--- a/pages/nuxt/index.vue
+++ b/pages/nuxt/index.vue
@@ -1,15 +1,14 @@
 <template>
     <div>
         <Head>
-            <Title>Nuxt Module - PrimeVue</Title>
-            <Meta name="description" content="PrimeVue has seamless integration with Nuxt using an exclusive module." />
+            <Title>Install PrimeVue with Nuxt</Title>
+            <Meta name="description" content="Setting up PrimeVue in a Nuxt project" />
         </Head>
-
         <div class="doc">
             <div class="doc-main">
                 <div class="doc-intro">
-                    <h1>Nuxt</h1>
-                    <p>PrimeVue has seamless integration with Nuxt using the official module.</p>
+                    <h1>Install PrimeVue with Nuxt</h1>
+                    <p>Setting up PrimeVue in a Nuxt project.</p>
                 </div>
                 <DocSections :docs="docs" />
             </div>
@@ -20,9 +19,12 @@
 
 <script>
 import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
-import ExampleDoc from '@/doc/nuxt/ExampleDoc.vue';
-import SetupDoc from '@/doc/nuxt/SetupDoc.vue';
-import StyleDoc from '@/doc/nuxt/StyleDoc.vue';
+import ExamplesDoc from '@/doc/nuxt/ExamplesDoc.vue';
+import ModuleSetupDoc from '@/doc/nuxt/ModuleSetupDoc.vue';
+import StyledModeDoc from '@/doc/nuxt/StyledModeDoc.vue';
+import UnstyledModeDoc from '@/doc/nuxt/UnstyledModeDoc.vue';
+import UsageDoc from '@/doc/nuxt/UsageDoc.vue';
+import VideoDoc from '@/doc/nuxt/VideoDoc.vue';
 import CSSLayerOrderDoc from '@/doc/nuxt/configuration/CSSLayerOrderDoc.vue';
 import ComponentsDoc from '@/doc/nuxt/configuration/ComponentsDoc.vue';
 import ComposablesDoc from '@/doc/nuxt/configuration/ComposablesDoc.vue';
@@ -30,7 +32,6 @@ import DirectivesDoc from '@/doc/nuxt/configuration/DirectivesDoc.vue';
 import ImportPTDoc from '@/doc/nuxt/configuration/ImportPTDoc.vue';
 import OptionsDoc from '@/doc/nuxt/configuration/OptionsDoc.vue';
 import UsePrimeVueDoc from '@/doc/nuxt/configuration/UsePrimeVueDoc.vue';
-import VideoDoc from '../../doc/nuxt/VideoDoc.vue';
 
 export default {
     data() {
@@ -42,13 +43,35 @@ export default {
                     component: DownloadDoc
                 },
                 {
-                    id: 'setup',
-                    label: 'Setup',
-                    component: SetupDoc
+                    id: 'module-setup',
+                    label: 'Module Setup',
+                    component: ModuleSetupDoc
+                },
+                {
+                    id: 'theming',
+                    label: 'Theming',
+                    description: 'PrimeVue has two theming modes; styled or unstyled.',
+                    children: [
+                        {
+                            id: 'styled',
+                            label: 'Styled Mode',
+                            component: StyledModeDoc
+                        },
+                        {
+                            id: 'unstyled',
+                            label: 'Unstyled Mode',
+                            component: UnstyledModeDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'usage',
+                    label: 'Usage',
+                    component: UsageDoc
                 },
                 {
                     id: 'configuration',
-                    label: 'Configuration',
+                    label: 'Module Configuration',
                     children: [
                         {
                             id: 'useprimevue',
@@ -88,14 +111,9 @@ export default {
                     ]
                 },
                 {
-                    id: 'styles',
-                    label: 'Styles',
-                    component: StyleDoc
-                },
-                {
-                    id: 'example',
-                    label: 'Example',
-                    component: ExampleDoc
+                    id: 'examples',
+                    label: 'Examples',
+                    component: ExamplesDoc
                 },
                 {
                     id: 'video',
diff --git a/pages/vite/index.vue b/pages/vite/index.vue
new file mode 100644
index 000000000..f3d9baad7
--- /dev/null
+++ b/pages/vite/index.vue
@@ -0,0 +1,77 @@
+<template>
+    <Head>
+        <Title>Install PrimeVue with Vite</Title>
+        <Meta name="description" content="Setting up PrimeVue in a Vite project" />
+    </Head>
+    <div class="doc">
+        <div class="doc-main">
+            <div class="doc-intro">
+                <h1>Install PrimeVue with Vite</h1>
+                <p>Setting up PrimeVue in a Vite project.</p>
+            </div>
+            <DocSections :docs="docs" />
+        </div>
+        <DocSectionNav :docs="docs" />
+    </div>
+</template>
+
+<script>
+import DownloadDoc from '@/doc/vite/DownloadDoc.vue';
+import ExamplesDoc from '@/doc/vite/ExamplesDoc.vue';
+import PluginDoc from '@/doc/vite/PluginDoc.vue';
+import StyledModeDoc from '@/doc/vite/StyledModeDoc.vue';
+import UnstyledModeDoc from '@/doc/vite/UnstyledModeDoc.vue';
+import UsageDoc from '@/doc/vite/UsageDoc.vue';
+import CreateVueDoc from '@/doc/vite/videos/CreateVueDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'download',
+                    label: 'Download',
+                    component: DownloadDoc
+                },
+                {
+                    id: 'plugin',
+                    label: 'Plugin',
+                    component: PluginDoc
+                },
+                {
+                    id: 'theming',
+                    label: 'Theming',
+                    description: 'PrimeVue has two theming modes; styled or unstyled.',
+                    children: [
+                        {
+                            id: 'styled',
+                            label: 'Styled Mode',
+                            component: StyledModeDoc
+                        },
+                        {
+                            id: 'unstyled',
+                            label: 'Unstyled Mode',
+                            component: UnstyledModeDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'usage',
+                    label: 'Usage',
+                    component: UsageDoc
+                },
+                {
+                    id: 'examples',
+                    label: 'Examples',
+                    component: ExamplesDoc
+                },
+                {
+                    id: 'videos',
+                    label: 'Video Tutorial',
+                    component: CreateVueDoc
+                }
+            ]
+        };
+    }
+};
+</script>

From 1929944162020271b75176210f6e63ca43d35918 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 26 Dec 2023 21:38:03 +0300
Subject: [PATCH 2/5] Update route links

---
 doc/breadcrumb/RouterDoc.vue        |  6 +++---
 doc/contextmenu/RouterDoc.vue       |  6 +++---
 doc/megamenu/RouterDoc.vue          |  4 ++--
 doc/menu/RouterDoc.vue              |  6 +++---
 doc/menubar/RouterDoc.vue           |  6 +++---
 doc/panelmenu/RouterDoc.vue         |  6 +++---
 doc/tieredmenu/RouterDoc.vue        |  6 +++---
 pages/landing/FooterSection.vue     |  8 +++----
 pages/landing/GetStartedSection.vue | 33 -----------------------------
 pages/landing/HeroSection.vue       |  2 +-
 10 files changed, 25 insertions(+), 58 deletions(-)
 delete mode 100644 pages/landing/GetStartedSection.vue

diff --git a/doc/breadcrumb/RouterDoc.vue b/doc/breadcrumb/RouterDoc.vue
index 92f0045d3..c242a6da8 100644
--- a/doc/breadcrumb/RouterDoc.vue
+++ b/doc/breadcrumb/RouterDoc.vue
@@ -26,7 +26,7 @@ export default {
         return {
             home: {
                 icon: 'pi pi-home',
-                route: '/installation'
+                route: '/introduction'
             },
             items: [{ label: 'Components' }, { label: 'Form' }, { label: 'InputText', route: '/inputtext' }],
             code: {
@@ -70,7 +70,7 @@ export default {
         return {
             home: {
                 icon: 'pi pi-home',
-                route: '/installation'
+                route: '/introduction'
             },
             items: [
                 { label: 'Components' }, 
@@ -106,7 +106,7 @@ import { ref } from "vue";
 
 const home = ref({
     icon: 'pi pi-home',
-    route: '/installation'
+    route: '/introduction'
 });
 const items = ref([
     { label: 'Components' }, 
diff --git a/doc/contextmenu/RouterDoc.vue b/doc/contextmenu/RouterDoc.vue
index f999362a0..be58280e6 100644
--- a/doc/contextmenu/RouterDoc.vue
+++ b/doc/contextmenu/RouterDoc.vue
@@ -47,7 +47,7 @@ export default {
                     label: 'Programmatic',
                     icon: 'pi pi-link',
                     command: () => {
-                        this.$router.push('/installation');
+                        this.$router.push('/introduction');
                     }
                 },
                 {
@@ -125,7 +125,7 @@ export default {
                     label: 'Programmatic',
                     icon: 'pi pi-link',
                     command: () => {
-                        this.$router.push('/installation');
+                        this.$router.push('/introduction');
                     }
                 },
                 {
@@ -193,7 +193,7 @@ const items = ref([
         label: 'Programmatic',
         icon: 'pi pi-link',
         command: () => {
-            router.push('/installation');
+            router.push('/introduction');
         }
     },
     {
diff --git a/doc/megamenu/RouterDoc.vue b/doc/megamenu/RouterDoc.vue
index 8fdc9c94b..c95160f37 100644
--- a/doc/megamenu/RouterDoc.vue
+++ b/doc/megamenu/RouterDoc.vue
@@ -71,7 +71,7 @@ export default {
                                     {
                                         label: 'Installation',
                                         command: () => {
-                                            this.$router.push('/installation');
+                                            this.$router.push('/introduction');
                                         }
                                     }
                                 ]
@@ -147,7 +147,7 @@ const items = ref([
                         {
                             label: 'Installation',
                             command: () => {
-                                $router.push('/installation');
+                                $router.push('/introduction');
                             }
                         }
                     ]
diff --git a/doc/menu/RouterDoc.vue b/doc/menu/RouterDoc.vue
index 374bb624c..0f6b6c172 100644
--- a/doc/menu/RouterDoc.vue
+++ b/doc/menu/RouterDoc.vue
@@ -38,7 +38,7 @@ export default {
                             label: 'Programmatic',
                             icon: 'pi pi-link',
                             command: () => {
-                                this.$router.push('/installation');
+                                this.$router.push('/introduction');
                             }
                         },
                         {
@@ -100,7 +100,7 @@ export default {
                     label: 'Programmatic',
                     icon: 'pi pi-link',
                     command: () => {
-                        this.$router.push('/installation');
+                        this.$router.push('/introduction');
                     }
                 },
                 {
@@ -150,7 +150,7 @@ const items = ref([
         label: 'Programmatic',
         icon: 'pi pi-link',
         command: () => {
-            this.$router.push('/installation');
+            this.$router.push('/introduction');
         }
     },
     {
diff --git a/doc/menubar/RouterDoc.vue b/doc/menubar/RouterDoc.vue
index 67f3ebc64..83dbc1dc8 100644
--- a/doc/menubar/RouterDoc.vue
+++ b/doc/menubar/RouterDoc.vue
@@ -45,7 +45,7 @@ export default {
                     label: 'Programmatic',
                     icon: 'pi pi-link',
                     command: () => {
-                        this.$router.push('/installation');
+                        this.$router.push('/introduction');
                     }
                 },
                 {
@@ -125,7 +125,7 @@ export default {
                     label: 'Programmatic',
                     icon: 'pi pi-link',
                     command: () => {
-                        this.$router.push('/installation');
+                        this.$router.push('/introduction');
                     }
                 },
                 {
@@ -194,7 +194,7 @@ const items = ref([
         label: 'Programmatic',
         icon: 'pi pi-link',
         command: () => {
-            router.push('/installation');
+            router.push('/introduction');
         }
     },
     {
diff --git a/doc/panelmenu/RouterDoc.vue b/doc/panelmenu/RouterDoc.vue
index 85f6cab1d..1c82ec15c 100644
--- a/doc/panelmenu/RouterDoc.vue
+++ b/doc/panelmenu/RouterDoc.vue
@@ -47,7 +47,7 @@ export default {
                     label: 'Programmatic',
                     icon: 'pi pi-link',
                     command: () => {
-                        this.$router.push('/installation');
+                        this.$router.push('/introduction');
                     }
                 },
                 {
@@ -131,7 +131,7 @@ export default {
                     label: 'Programmatic',
                     icon: 'pi pi-link',
                     command: () => {
-                        this.$router.push('/installation');
+                        this.$router.push('/introduction');
                     }
                 },
                 {
@@ -204,7 +204,7 @@ const items = ref([
         label: 'Programmatic',
         icon: 'pi pi-link',
         command: () => {
-            router.push('/installation');
+            router.push('/introduction');
         }
     },
     {
diff --git a/doc/tieredmenu/RouterDoc.vue b/doc/tieredmenu/RouterDoc.vue
index 75e646fd5..d40c8bf66 100644
--- a/doc/tieredmenu/RouterDoc.vue
+++ b/doc/tieredmenu/RouterDoc.vue
@@ -45,7 +45,7 @@ export default {
                     label: 'Programmatic',
                     icon: 'pi pi-link',
                     command: () => {
-                        this.$router.push('/installation');
+                        this.$router.push('/introduction');
                     }
                 },
                 {
@@ -125,7 +125,7 @@ export default {
                     label: 'Programmatic',
                     icon: 'pi pi-link',
                     command: () => {
-                        this.$router.push('/installation');
+                        this.$router.push('/introduction');
                     }
                 },
                 {
@@ -194,7 +194,7 @@ const items = ref([
         label: 'Programmatic',
         icon: 'pi pi-link',
         command: () => {
-            router.push('/installation');
+            router.push('/introduction');
         }
     },
     {
diff --git a/pages/landing/FooterSection.vue b/pages/landing/FooterSection.vue
index ce7c65245..4bd7be466 100644
--- a/pages/landing/FooterSection.vue
+++ b/pages/landing/FooterSection.vue
@@ -6,7 +6,7 @@
                     <ul class="list-none p-0 m-0">
                         <li class="font-bold mb-5">General</li>
                         <li class="mb-4">
-                            <router-link to="/installation" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Get Started</router-link>
+                            <PrimeVueNuxtLink to="/introduction" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Get Started</PrimeVueNuxtLink>
                         </li>
                         <li class="mb-4">
                             <a href="https://github.com/primefaces/primevue-examples" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Examples</a>
@@ -23,7 +23,7 @@
                             <a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Discord</a>
                         </li>
                         <li class="mb-4">
-                            <router-link to="/support" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">PRO Support</router-link>
+                            <PrimeVueNuxtLink to="/support" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">PRO Support</PrimeVueNuxtLink>
                         </li>
                     </ul>
                 </div>
@@ -31,10 +31,10 @@
                     <ul class="list-none p-0 m-0">
                         <li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
                         <li class="mb-4">
-                            <router-link to="/theming" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Styled Mode</router-link>
+                            <PrimeVueNuxtLink to="/theming" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Styled Mode</PrimeVueNuxtLink>
                         </li>
                         <li class="mb-4">
-                            <router-link to="/unstyled" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Unstyled Mode</router-link>
+                            <PrimeVueNuxtLink to="/unstyled" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Unstyled Mode</PrimeVueNuxtLink>
                         </li>
                     </ul>
                 </div>
diff --git a/pages/landing/GetStartedSection.vue b/pages/landing/GetStartedSection.vue
deleted file mode 100644
index 6b8bca40e..000000000
--- a/pages/landing/GetStartedSection.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-    <section class="landing-getstarted flex flex-column align-items-center justify-content-center mt-8 z-1">
-        <div class="flex flex-column md:flex-row align-items-center justify-content-center">
-            <PrimeVueNuxtLink to="/installation" class="linkbox active font-semibold py-3 px-4 fadeinleft animation-duration-2000 animation-ease-out"> Get Started <i class="pi pi-arrow-right ml-3"></i> </PrimeVueNuxtLink>
-            <div class="relative cursor-pointer box download-box w-15rem font-medium p-3 px-4 mt-3 md:mt-0 md:ml-3 bg-transparent inline-flex align-items-center fadeinright animation-duration-2000 animation-ease-out" @click="copyClick">
-                <i :class="downloadIcon"></i>
-                <span class="font-bold select-all" style="font-family: monaco, monospace"> {{ npmText }} </span>
-            </div>
-        </div>
-    </section>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            npmText: 'npm i primevue',
-            downloadIcon: 'pi pi-download mr-3 download-icon'
-        };
-    },
-    methods: {
-        copyClick() {
-            navigator.clipboard.writeText(this.npmText);
-            this.npmText = 'copied!';
-            this.downloadIcon = 'pi pi-copy mr-3 download-icon';
-            setTimeout(() => {
-                this.npmText = 'npm i primevue';
-                this.downloadIcon = 'pi pi-download mr-3 download-icon';
-            }, 2000);
-        }
-    }
-};
-</script>
diff --git a/pages/landing/HeroSection.vue b/pages/landing/HeroSection.vue
index 543bc1c47..f1cfa7198 100644
--- a/pages/landing/HeroSection.vue
+++ b/pages/landing/HeroSection.vue
@@ -7,7 +7,7 @@
                     Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier.
                 </p>
                 <div class="flex align-items-center gap-3">
-                    <PrimeVueNuxtLink to="/installation" class="linkbox active font-semibold py-3 px-4">
+                    <PrimeVueNuxtLink to="/introduction" class="linkbox active font-semibold py-3 px-4">
                         <span>Get Started</span>
                         <i class="pi pi-arrow-right ml-3"></i>
                     </PrimeVueNuxtLink>

From 0615d3ade528d0b06783355d3e81df2265ea180c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 26 Dec 2023 23:17:49 +0300
Subject: [PATCH 3/5] Refactored landing components folder, move away from
 pages

---
 {pages => components}/landing/BlockSection.vue    |  0
 {pages => components}/landing/FeaturesSection.vue |  0
 {pages => components}/landing/FooterSection.vue   |  0
 {pages => components}/landing/HeroSection.vue     |  0
 {pages => components}/landing/TemplateSection.vue |  0
 {pages => components}/landing/ThemeSection.vue    |  0
 {pages => components}/landing/UsersSection.vue    |  0
 pages/index.vue                                   | 14 +++++++-------
 8 files changed, 7 insertions(+), 7 deletions(-)
 rename {pages => components}/landing/BlockSection.vue (100%)
 rename {pages => components}/landing/FeaturesSection.vue (100%)
 rename {pages => components}/landing/FooterSection.vue (100%)
 rename {pages => components}/landing/HeroSection.vue (100%)
 rename {pages => components}/landing/TemplateSection.vue (100%)
 rename {pages => components}/landing/ThemeSection.vue (100%)
 rename {pages => components}/landing/UsersSection.vue (100%)

diff --git a/pages/landing/BlockSection.vue b/components/landing/BlockSection.vue
similarity index 100%
rename from pages/landing/BlockSection.vue
rename to components/landing/BlockSection.vue
diff --git a/pages/landing/FeaturesSection.vue b/components/landing/FeaturesSection.vue
similarity index 100%
rename from pages/landing/FeaturesSection.vue
rename to components/landing/FeaturesSection.vue
diff --git a/pages/landing/FooterSection.vue b/components/landing/FooterSection.vue
similarity index 100%
rename from pages/landing/FooterSection.vue
rename to components/landing/FooterSection.vue
diff --git a/pages/landing/HeroSection.vue b/components/landing/HeroSection.vue
similarity index 100%
rename from pages/landing/HeroSection.vue
rename to components/landing/HeroSection.vue
diff --git a/pages/landing/TemplateSection.vue b/components/landing/TemplateSection.vue
similarity index 100%
rename from pages/landing/TemplateSection.vue
rename to components/landing/TemplateSection.vue
diff --git a/pages/landing/ThemeSection.vue b/components/landing/ThemeSection.vue
similarity index 100%
rename from pages/landing/ThemeSection.vue
rename to components/landing/ThemeSection.vue
diff --git a/pages/landing/UsersSection.vue b/components/landing/UsersSection.vue
similarity index 100%
rename from pages/landing/UsersSection.vue
rename to components/landing/UsersSection.vue
diff --git a/pages/index.vue b/pages/index.vue
index 58ba1d022..626176e45 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -13,16 +13,16 @@
 </template>
 
 <script>
+import BlockSection from '@/components/landing/BlockSection.vue';
+import FeaturesSection from '@/components/landing/FeaturesSection.vue';
+import FooterSection from '@/components/landing/FooterSection.vue';
+import HeroSection from '@/components/landing/HeroSection.vue';
+import TemplateSection from '@/components/landing/TemplateSection.vue';
+import ThemeSection from '@/components/landing/ThemeSection.vue';
+import UsersSection from '@/components/landing/UsersSection.vue';
 import EventBus from '@/layouts/AppEventBus';
 import AppNews from '@/layouts/AppNews';
 import AppTopBar from '@/layouts/AppTopBar.vue';
-import BlockSection from './landing/BlockSection.vue';
-import FeaturesSection from './landing/FeaturesSection.vue';
-import FooterSection from './landing/FooterSection.vue';
-import HeroSection from './landing/HeroSection.vue';
-import TemplateSection from './landing/TemplateSection.vue';
-import ThemeSection from './landing/ThemeSection.vue';
-import UsersSection from './landing/UsersSection.vue';
 
 export default {
     setup() {

From 49b2c2cda03794f26748efb10a56ff6334d4c452 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 27 Dec 2023 00:24:05 +0300
Subject: [PATCH 4/5] Add introduction doc

---
 doc/introduction/AccessibilityDoc.vue |  8 ++++
 doc/introduction/AddOnsDoc.vue        |  8 ++++
 doc/introduction/OverviewDoc.vue      | 15 +++++++
 doc/introduction/PassThroughDoc.vue   |  9 ++++
 doc/introduction/SupportDoc.vue       | 10 +++++
 doc/introduction/ThemingDoc.vue       | 10 +++++
 pages/introduction/index.vue          | 64 +++++++++++++++++++++++++++
 7 files changed, 124 insertions(+)
 create mode 100644 doc/introduction/AccessibilityDoc.vue
 create mode 100644 doc/introduction/AddOnsDoc.vue
 create mode 100644 doc/introduction/OverviewDoc.vue
 create mode 100644 doc/introduction/PassThroughDoc.vue
 create mode 100644 doc/introduction/SupportDoc.vue
 create mode 100644 doc/introduction/ThemingDoc.vue
 create mode 100644 pages/introduction/index.vue

diff --git a/doc/introduction/AccessibilityDoc.vue b/doc/introduction/AccessibilityDoc.vue
new file mode 100644
index 000000000..a2dde6924
--- /dev/null
+++ b/doc/introduction/AccessibilityDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue has WCAG 2.1 AA level compliance; each component has a dedicated accessibility section to document several aspects, including keyboard and screen reader support. Through communication channels such as GitHub or Discord, numerous
+            accessibility experts worldwide continue to provide constant feedback to improve the accessibility features further. View the <NuxtLink to="/guides/accessibility">accessibility guide</NuxtLink> to learn more.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/introduction/AddOnsDoc.vue b/doc/introduction/AddOnsDoc.vue
new file mode 100644
index 000000000..60ce746be
--- /dev/null
+++ b/doc/introduction/AddOnsDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue does not require financial sponsorships from its community; instead, to be backed by a solid financial foundation, optional add-ons are offered. These include a Figma UI Kit, premium application templates, and reusable UI blocks
+            called PrimeBlocks. The add-ons are optional and there is no paywall when using PrimeVue.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/introduction/OverviewDoc.vue b/doc/introduction/OverviewDoc.vue
new file mode 100644
index 000000000..9180d954b
--- /dev/null
+++ b/doc/introduction/OverviewDoc.vue
@@ -0,0 +1,15 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue is a complete UI suite for Vue.js consisting of a rich set of UI components, icons, blocks, and application templates. The project's primary goal is to boost developer productivity by offering reusable solutions that are easy to
+            tune and customize as an in-house library.
+        </p>
+        <p>
+            The project has been created by <a href="https://www.primetek.com.tr" class="text-primary hover:underline font-medium">PrimeTek</a> a world-renowned vendor of popular UI Component suites, including
+            <a href="https://primefaces.org" class="text-primary hover:underline font-medium">PrimeFaces</a>, <a href="https://primeng.org" class="text-primary hover:underline font-medium">PrimeNG</a>, and
+            <a href="https://primevue.org" class="text-primary hover:underline font-medium">PrimeReact.</a> All the members in <NuxtLink to="/team">our team</NuxtLink> are full time employees of PrimeTek who share the same passion and vision for open
+            source to create awesome UI libraries. Depending on a 3rd party library may introduce risks if the library maintainers decide not to work on the project, however, this is not the case with PrimeVue as the track record of PrimeTek shows.
+            For example, PrimeFaces has been maintained actively since 2008.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/introduction/PassThroughDoc.vue b/doc/introduction/PassThroughDoc.vue
new file mode 100644
index 000000000..0ef90b466
--- /dev/null
+++ b/doc/introduction/PassThroughDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PassThrough is an innovative API to provide access to the internal DOM elements to add arbitrary attributes. In general, traditional UI component libraries encapsulate UI and logic with limited APIs that makes the developers dependant on
+            the library maintainer to extend this API by adding new props or events. With <NuxtLink to="/passthrough">PassThrough</NuxtLink> this limitation has been eliminated since, you'll be able to access the internal of the components to add
+            events and attributes. Some common use-cases are adding test attributes, additional aria attributes, custom events and styling.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/introduction/SupportDoc.vue b/doc/introduction/SupportDoc.vue
new file mode 100644
index 000000000..247a725b4
--- /dev/null
+++ b/doc/introduction/SupportDoc.vue
@@ -0,0 +1,10 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            <a href="https://github.com/orgs/primefaces/discussions" class="font-medium hover:underline text-primary">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="font-medium hover:underline text-primary">Discord</a> are the open
+            environments for the community users to seek support, post topics and discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek cannot guarantee an instant response time although
+            they are monitored and maintained by our staff regularly. If you need to secure our response within 1 business day in addition to other benefits, you may consider the optional <NuxtLink to="/support">PRO support</NuxtLink> service
+            instead.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/introduction/ThemingDoc.vue b/doc/introduction/ThemingDoc.vue
new file mode 100644
index 000000000..1a7fe400e
--- /dev/null
+++ b/doc/introduction/ThemingDoc.vue
@@ -0,0 +1,10 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue can be styled in two modes; styled or unstyled. Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Unstyled mode on the other hand, leaves the styling to you while
+            implementing the functionality and accessibility. Unstyled mode provides full control over the styling with no boundaries by implementing a pluggable architecture to utilize CSS libraries like Tailwind CSS, Bootstrap, Bulma or your own
+            custom CSS. We've even further built the <a href="tailwind.primevue.org" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> library to skin the UI library with utility classes of Tailwind. This design is future proof as
+            PrimeVue can be styled with any CSS library without actually depending on it in its core.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/pages/introduction/index.vue b/pages/introduction/index.vue
new file mode 100644
index 000000000..f44957e6a
--- /dev/null
+++ b/pages/introduction/index.vue
@@ -0,0 +1,64 @@
+<template>
+    <Head>
+        <Title>Introduction - PrimeVue</Title>
+        <Meta name="description" content="Next-generation UI Component suite for Vue." />
+    </Head>
+    <div class="doc">
+        <div class="doc-main">
+            <div class="doc-intro">
+                <h1>Introduction</h1>
+                <p>Next-generation UI Component suite for Vue.</p>
+            </div>
+            <DocSections :docs="docs" />
+        </div>
+        <DocSectionNav :docs="docs" />
+    </div>
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/introduction/AccessibilityDoc.vue';
+import AddOnsDoc from '@/doc/introduction/AddOnsDoc.vue';
+import OverviewDoc from '@/doc/introduction/OverviewDoc.vue';
+import PassThroughDoc from '@/doc/introduction/PassThroughDoc.vue';
+import SupportDoc from '@/doc/introduction/SupportDoc.vue';
+import ThemingDoc from '@/doc/introduction/ThemingDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'overview',
+                    label: 'Overview',
+                    component: OverviewDoc
+                },
+                {
+                    id: 'theming',
+                    label: 'Theming',
+                    component: ThemingDoc
+                },
+                {
+                    id: 'passthrough',
+                    label: 'PassThrough',
+                    component: PassThroughDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                },
+                {
+                    id: 'add-ons',
+                    label: 'Add-Ons',
+                    component: AddOnsDoc
+                },
+                {
+                    id: 'support',
+                    label: 'Support',
+                    component: SupportDoc
+                }
+            ]
+        };
+    }
+};
+</script>

From 54ed75b7b715777a0531470bbd174fbc61516971 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 27 Dec 2023 00:29:20 +0300
Subject: [PATCH 5/5] Add redirect

---
 doc/installation/DownloadDoc.vue         | 27 --------
 doc/installation/ExamplesDoc.vue         | 19 ------
 doc/installation/PluginDoc.vue           | 27 --------
 doc/installation/PropCasesDoc.vue        | 25 -------
 doc/installation/StyledModeDoc.vue       | 41 ------------
 doc/installation/UnstyledModeDoc.vue     | 27 --------
 doc/installation/UsageDoc.vue            | 46 -------------
 doc/installation/videos/CreateVueDoc.vue | 11 ----
 nuxt.config.js                           |  4 ++
 pages/installation/index.vue             | 83 ------------------------
 vercel.json                              |  9 ---
 11 files changed, 4 insertions(+), 315 deletions(-)
 delete mode 100644 doc/installation/DownloadDoc.vue
 delete mode 100644 doc/installation/ExamplesDoc.vue
 delete mode 100644 doc/installation/PluginDoc.vue
 delete mode 100644 doc/installation/PropCasesDoc.vue
 delete mode 100644 doc/installation/StyledModeDoc.vue
 delete mode 100644 doc/installation/UnstyledModeDoc.vue
 delete mode 100644 doc/installation/UsageDoc.vue
 delete mode 100644 doc/installation/videos/CreateVueDoc.vue
 delete mode 100644 pages/installation/index.vue
 delete mode 100644 vercel.json

diff --git a/doc/installation/DownloadDoc.vue b/doc/installation/DownloadDoc.vue
deleted file mode 100644
index 31b02b26f..000000000
--- a/doc/installation/DownloadDoc.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a>.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-# Using npm
-npm install primevue
-
-# Using yarn
-yarn add primevue
-
-# Using pnpm
-pnpm add primevue
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/installation/ExamplesDoc.vue b/doc/installation/ExamplesDoc.vue
deleted file mode 100644
index a91d78481..000000000
--- a/doc/installation/ExamplesDoc.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p class="mb-0">We've created various samples for the popular options in the Vue ecosystem. Visit the <a href="https://github.com/primefaces/primevue-examples">primevue-examples</a> repository for more samples.</p>
-    </DocSectionText>
-    <div v-if="false" class="flex flex-wrap card align-items-center gap-5">
-        <a href="https://github.com/primefaces/primevue-examples/tree/main/vite-quickstart" class="flex flex-column align-items-center">
-            <img src="https://primefaces.org/cdn/primevue/images/logos/vite.svg" alt="Vite" class="w-4rem h-4rem mb-3" />
-            <span class="text-xl text-900">Vite</span>
-        </a>
-        <a href="https://github.com/primefaces/primevue-examples/tree/main/nuxt-quickstart" class="flex flex-column align-items-center">
-            <img src="https://primefaces.org/cdn/primevue/images/logos/nuxt.svg" alt="Nuxt.JS" class="w-4rem h-4rem mb-3" />
-            <span class="text-xl text-900">Nuxt</span>
-        </a>
-        <a href="https://github.com/primefaces/primevue-examples/tree/main/astro-quickstart" class="text-800 flex flex-column align-items-center">
-            <img src="https://primefaces.org/cdn/primevue/images/logos/astro.svg" alt="Astro" class="w-4rem h-4rem mb-3" />
-            <span class="text-xl text-900">Astro</span>
-        </a>
-    </div>
-</template>
diff --git a/doc/installation/PluginDoc.vue b/doc/installation/PluginDoc.vue
deleted file mode 100644
index f6953eb3b..000000000
--- a/doc/installation/PluginDoc.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            PrimeVue plugin is required to be installed with the <i>use</i> function to set up the default <NuxtLink to="/theming">configuration</NuxtLink>. If you are using <NuxtLink to="https://nuxt.com/">Nuxt</NuxtLink>, this step is not required
-            as our nuxt module handles it.
-        </p>
-    </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import { createApp } from 'vue';
-import PrimeVue from 'primevue/config';
-
-const app = createApp(App);
-app.use(PrimeVue);
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/installation/PropCasesDoc.vue b/doc/installation/PropCasesDoc.vue
deleted file mode 100644
index cc94aef09..000000000
--- a/doc/installation/PropCasesDoc.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Component prop names are described as camel case throughout the documentation however kebab-case is also fully supported. Events on the other hand should always be kebab-case.</p>
-
-        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Dialog :showHeader="false"></Dialog>
-
-<!-- can be written as -->
-
-<Dialog :show-header="false"></Dialog>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/installation/StyledModeDoc.vue b/doc/installation/StyledModeDoc.vue
deleted file mode 100644
index 9c2ce90f9..000000000
--- a/doc/installation/StyledModeDoc.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the
-            <NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
-        </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>
-            The classes of PrimeVue is defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap, Normalize
-            or similar a custom CSS layer configuration might be necessary. Note that this only applies to Styled Mode as Unstyled Mode does not use any default styles or layers. Here is an example with Tailwind, visit the
-            <NuxtLink to="/guides/csslayer">CSS Layer</NuxtLink> for more information.
-        </p>
-        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: "\nimport 'primevue/resources/themes/lara-light-green/theme.css'\n"
-            },
-            code2: {
-                basic: `
-/* Order */
-@layer reset, primevue;
-
-/* Reset CSS */
-@layer reset {
-    button,
-    input {
-        /* CSS to Reset */
-    }
-}
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/installation/UnstyledModeDoc.vue b/doc/installation/UnstyledModeDoc.vue
deleted file mode 100644
index 84c1819c6..000000000
--- a/doc/installation/UnstyledModeDoc.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Unstyled mode is disabled by default for all components. Using the PrimeVue plugin during installation, set <i>unstyled</i> as true to enable it globally. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more
-            information and examples.
-        </p>
-        <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import { createApp } from "vue";
-import PrimeVue from "primevue/config";
-const app = createApp(App);
-
-app.use(PrimeVue, { unstyled: true });
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/installation/UsageDoc.vue b/doc/installation/UsageDoc.vue
deleted file mode 100644
index 4e3218eea..000000000
--- a/doc/installation/UsageDoc.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.</p>
-    </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Button label="Check" icon="pi pi-check" />
-    </div>
-    <DocSectionCode :code="code" importCode />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Button from "primevue/button"
-
-const app = createApp(App);
-app.component('Button', Button);
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Button label="Check" icon="pi pi-check" />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Button label="Check" icon="pi pi-check" />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/installation/videos/CreateVueDoc.vue b/doc/installation/videos/CreateVueDoc.vue
deleted file mode 100644
index cd2836e41..000000000
--- a/doc/installation/videos/CreateVueDoc.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            <a alt="Create Vue App" href="https://github.com/vuejs/create-vue">Create-Vue</a>
-            is the recommended way to start a Vite-powered Vue project.
-        </p>
-    </DocSectionText>
-    <div class="video-container">
-        <iframe width="560" height="315" src="https://www.youtube.com/embed/FjYesOz95MM" frameborder="0" allowfullscreen></iframe>
-    </div>
-</template>
diff --git a/nuxt.config.js b/nuxt.config.js
index ee9386ec8..e53278897 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -17,6 +17,10 @@ export default defineNuxtConfig({
     nitro: {
         alias: aliasConfig.resolve.alias
     },
+    routeRules: {
+        '/accessibility': { redirect: { to: '/guides/accessibility', statusCode: 301 } },
+        '/installation': { redirect: { to: '/vite', statusCode: 301 } }
+    },
     primevue: {
         options: {
             ripple: true
diff --git a/pages/installation/index.vue b/pages/installation/index.vue
deleted file mode 100644
index 121556c96..000000000
--- a/pages/installation/index.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-    <Head>
-        <Title>Getting Started - PrimeVue</Title>
-        <Meta name="description" content="PrimeVue is a rich set of open source components for Vue." />
-    </Head>
-    <div class="doc">
-        <div class="doc-main">
-            <div class="doc-intro">
-                <h1>Installation</h1>
-                <p>PrimeVue is a rich set of open source UI components for Vue.</p>
-            </div>
-            <DocSections :docs="docs" />
-        </div>
-        <DocSectionNav :docs="docs" />
-    </div>
-</template>
-
-<script>
-import DownloadDoc from '@/doc/installation/DownloadDoc.vue';
-import ExamplesDoc from '@/doc/installation/ExamplesDoc.vue';
-import PluginDoc from '@/doc/installation/PluginDoc.vue';
-import PropCasesDoc from '@/doc/installation/PropCasesDoc.vue';
-import StyledModeDoc from '@/doc/installation/StyledModeDoc.vue';
-import UnstyledModeDoc from '@/doc/installation/UnstyledModeDoc.vue';
-import UsageDoc from '@/doc/installation/UsageDoc.vue';
-import CreateVueDoc from '@/doc/installation/videos/CreateVueDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'download',
-                    label: 'Download',
-                    component: DownloadDoc
-                },
-                {
-                    id: 'plugin',
-                    label: 'Plugin',
-                    component: PluginDoc
-                },
-                {
-                    id: 'usage',
-                    label: 'Usage',
-                    component: UsageDoc
-                },
-                {
-                    id: 'theming',
-                    label: 'Theming',
-                    description: 'PrimeVue has two theming modes; styled or unstyled.',
-                    children: [
-                        {
-                            id: 'styled',
-                            label: 'Styled Mode',
-                            component: StyledModeDoc
-                        },
-                        {
-                            id: 'unstyled',
-                            label: 'Unstyled Mode',
-                            component: UnstyledModeDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'propcases',
-                    label: 'Prop Cases',
-                    component: PropCasesDoc
-                },
-                {
-                    id: 'examples',
-                    label: 'Examples',
-                    component: ExamplesDoc
-                },
-                {
-                    id: 'videos',
-                    label: 'Video Tutorial',
-                    component: CreateVueDoc
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/vercel.json b/vercel.json
deleted file mode 100644
index 35c70806b..000000000
--- a/vercel.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-    "redirects": [
-      { 
-        "source": "/accessibility",
-        "destination": "/guides/accessibility", 
-        "permanent": true
-      }
-    ]
-  }
\ No newline at end of file