From bee6a7f0f1c93b95bb333ba6f6c13bb27bf107e3 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 27 Oct 2024 12:46:57 +0300
Subject: [PATCH 1/3] Update pass-through docs

---
 .../showcase/doc/passthrough/CustomCSSDoc.vue | 30 ++++---------------
 .../doc/passthrough/IntroductionDoc.vue       | 17 +++++++++++
 apps/showcase/pages/passthrough/index.vue     | 10 +++++--
 3 files changed, 31 insertions(+), 26 deletions(-)
 create mode 100644 apps/showcase/doc/passthrough/IntroductionDoc.vue

diff --git a/apps/showcase/doc/passthrough/CustomCSSDoc.vue b/apps/showcase/doc/passthrough/CustomCSSDoc.vue
index 5a0c46f75..3c977bef1 100644
--- a/apps/showcase/doc/passthrough/CustomCSSDoc.vue
+++ b/apps/showcase/doc/passthrough/CustomCSSDoc.vue
@@ -1,8 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            The <i>global</i> property has a <i>css</i> option to define custom css that belongs to a global <i>pt</i> configuration. Common use case of this feature is defining global styles and animations related to the pass through props
-            configuration.
+            The <i>global</i> property has a <i>css</i> option to define custom css that belongs to a global <i>pt</i> configuration. Common use case of this feature is defining global styles and animations related to the pass through configuration.
         </p>
     </DocSectionText>
 
@@ -23,30 +22,13 @@ app.use(PrimeVue, {
     pt: {
         global: {
             css: \`
-                button {
-                    padding: 2rem;
-                }
-
-                .p-ink {
-                    display: block;
-                    position: absolute;
-                    background: rgba(255, 255, 255, 0.5);
-                    border-radius: 100%;
-                    transform: scale(0);
-                    pointer-events: none;
-                }
-
-                .p-ink-active {
-                    animation: ripple 0.4s linear;
-                }
-
-                @keyframes ripple {
-                    100% {
-                        opacity: 0;
-                        transform: scale(2.5);
-                    }
+                .my-button {
+                    border-width: 2px;
                 }
             \`
+        },
+        button: {
+            root: 'my-button'
         }
     }
 });
diff --git a/apps/showcase/doc/passthrough/IntroductionDoc.vue b/apps/showcase/doc/passthrough/IntroductionDoc.vue
new file mode 100644
index 000000000..5656e972f
--- /dev/null
+++ b/apps/showcase/doc/passthrough/IntroductionDoc.vue
@@ -0,0 +1,17 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            In traditional 3rd party UI libraries, users are limited to the API provided by component author. This API commonly consists of props, events and slots. Whenever a requirement emerges for a new customization option in the API, the
+            component author needs to develop and publish it with a new release.
+        </p>
+        <p>
+            Vision of PrimeTek is <i>Your components, not ours</i>. The pass through feature is a key element to implement this vision by exposing the component internals in order to apply arbitrary attributes and listeners to the DOM elements. The
+            main advantage of this approach is that it prevents you from being locked into the component author. We recommend considering the pass-through feature whenever you need to tailor a component that lacks a built-in feature for your specific
+            requirement.
+        </p>
+        <p>Two videos are available at PrimeTV youtube channel, first one is an introduction and second one covers a unique case that is solved by the pass-through.</p>
+    </DocSectionText>
+    <div class="video-container">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?si=gBh1ow-f0JfGWPrv&amp;list=PLC9bp-OHi-Wk9fMhxOM1u6Si82i6AxqUM" frameborder="0" allowfullscreen></iframe>
+    </div>
+</template>
diff --git a/apps/showcase/pages/passthrough/index.vue b/apps/showcase/pages/passthrough/index.vue
index c69c6ca2c..f855d0141 100644
--- a/apps/showcase/pages/passthrough/index.vue
+++ b/apps/showcase/pages/passthrough/index.vue
@@ -1,13 +1,13 @@
 <template>
     <Head>
         <Title>PrimeVue - Pass Through</Title>
-        <Meta name="description" content="The Pass Through props is an API to access the internal DOM Structure of the components." />
+        <Meta name="description" content="The Pass Through attributes is an API to access the internal DOM Structure of the components." />
     </Head>
     <div class="doc">
         <div class="doc-main">
             <div class="doc-intro">
                 <h1>Pass Through</h1>
-                <p>The Pass Through props is an API to access the internal DOM Structure of the components.</p>
+                <p>The Pass Through attributes is an API to access the internal DOM Structure of the components.</p>
             </div>
             <DocSections :docs="docs" />
         </div>
@@ -20,6 +20,7 @@ import BasicDoc from '@/doc/passthrough/BasicDoc.vue';
 import CustomCSSDoc from '@/doc/passthrough/CustomCSSDoc.vue';
 import DeclarativeDoc from '@/doc/passthrough/DeclarativeDoc.vue';
 import GlobalDoc from '@/doc/passthrough/GlobalDoc.vue';
+import IntroductionDoc from '@/doc/passthrough/IntroductionDoc.vue';
 import LifecycleDoc from '@/doc/passthrough/LifecycleDoc.vue';
 import PCPrefixDoc from '@/doc/passthrough/PCPrefixDoc.vue';
 import UsePassThroughDoc from '@/doc/passthrough/UsePassThroughDoc.vue';
@@ -28,6 +29,11 @@ export default {
     data() {
         return {
             docs: [
+                {
+                    id: 'introduction',
+                    label: 'Introduction',
+                    component: IntroductionDoc
+                },
                 {
                     id: 'basic',
                     label: 'Basic',

From 2d6b48bfd9afb7d6fd9813ce2c9ff92ae1f88150 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 27 Oct 2024 13:54:37 +0300
Subject: [PATCH 2/3] Updated getting started docs

---
 apps/showcase/assets/menu/menu.json           | 10 ++---
 apps/showcase/doc/nuxt/DownloadDoc.vue        |  8 ++--
 .../doc/nuxt/{SetupDoc.vue => ModuleDoc.vue}  |  0
 apps/showcase/doc/nuxt/NextStepsDoc.vue       | 11 +++++
 apps/showcase/doc/nuxt/StyleDoc.vue           | 29 ------------
 apps/showcase/doc/nuxt/ThemeDoc.vue           | 33 ++++++++++++++
 .../doc/nuxt/{UsageDoc.vue => VerifyDoc.vue}  |  6 +--
 .../doc/nuxt/configuration/UsePrimeVueDoc.vue |  2 +-
 .../doc/passthrough/IntroductionDoc.vue       |  4 +-
 apps/showcase/doc/vite/DownloadDoc.vue        |  6 +--
 apps/showcase/doc/vite/NextStepsDoc.vue       | 12 +++++
 apps/showcase/doc/vite/PluginDoc.vue          |  5 +--
 apps/showcase/doc/vite/StyledModeDoc.vue      | 44 -------------------
 apps/showcase/doc/vite/ThemeDoc.vue           | 29 ++++++++++++
 apps/showcase/doc/vite/UnstyledModeDoc.vue    | 29 ------------
 .../doc/vite/{UsageDoc.vue => VerifyDoc.vue}  | 11 +++--
 apps/showcase/pages/nuxt/index.vue            | 43 ++++++++----------
 apps/showcase/pages/vite/index.vue            | 40 ++++++++---------
 18 files changed, 146 insertions(+), 176 deletions(-)
 rename apps/showcase/doc/nuxt/{SetupDoc.vue => ModuleDoc.vue} (100%)
 create mode 100644 apps/showcase/doc/nuxt/NextStepsDoc.vue
 delete mode 100644 apps/showcase/doc/nuxt/StyleDoc.vue
 create mode 100644 apps/showcase/doc/nuxt/ThemeDoc.vue
 rename apps/showcase/doc/nuxt/{UsageDoc.vue => VerifyDoc.vue} (73%)
 create mode 100644 apps/showcase/doc/vite/NextStepsDoc.vue
 delete mode 100644 apps/showcase/doc/vite/StyledModeDoc.vue
 create mode 100644 apps/showcase/doc/vite/ThemeDoc.vue
 delete mode 100644 apps/showcase/doc/vite/UnstyledModeDoc.vue
 rename apps/showcase/doc/vite/{UsageDoc.vue => VerifyDoc.vue} (58%)

diff --git a/apps/showcase/assets/menu/menu.json b/apps/showcase/assets/menu/menu.json
index e0f4040ee..1b532f34d 100644
--- a/apps/showcase/assets/menu/menu.json
+++ b/apps/showcase/assets/menu/menu.json
@@ -586,11 +586,6 @@
                 }
             ]
         },
-        {
-            "name": "Contribution",
-            "to": "/contribution",
-            "icon": "pi pi-users"
-        },
         {
             "name": "Discover",
             "icon": "pi pi-search",
@@ -611,6 +606,11 @@
                     "name": "Changelog",
                     "href": "https://github.com/primefaces/primevue/blob/master/CHANGELOG.md"
                 },
+                {
+                    "name": "Contribution",
+                    "to": "/contribution",
+                    "icon": "pi pi-users"
+                },
                 {
                     "name": "Store",
                     "href": "https://www.primefaces.org/store/"
diff --git a/apps/showcase/doc/nuxt/DownloadDoc.vue b/apps/showcase/doc/nuxt/DownloadDoc.vue
index fd32f96d6..353d90ed8 100644
--- a/apps/showcase/doc/nuxt/DownloadDoc.vue
+++ b/apps/showcase/doc/nuxt/DownloadDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <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/@primevue/nuxt-module" target="_blank" rel="noopener noreferrer">nuxt-primevue</a> module.
+            <a href="https://www.npmjs.com/package/@primevue/nuxt-module" target="_blank" rel="noopener noreferrer">@primevue/nuxt-module</a>.
         </p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
@@ -15,15 +15,15 @@ export default {
             code: {
                 basic: `
 # Using npm
-npm install primevue
+npm install primevue @primevue/themes
 npm install --save-dev @primevue/nuxt-module
 
 # Using yarn
-yarn add primevue
+yarn add primevue @primevue/themes
 yarn add --dev @primevue/nuxt-module
 
 # Using pnpm
-pnpm add primevue
+pnpm add primevue @primevue/themes
 pnpm add -D @primevue/nuxt-module
 `
             }
diff --git a/apps/showcase/doc/nuxt/SetupDoc.vue b/apps/showcase/doc/nuxt/ModuleDoc.vue
similarity index 100%
rename from apps/showcase/doc/nuxt/SetupDoc.vue
rename to apps/showcase/doc/nuxt/ModuleDoc.vue
diff --git a/apps/showcase/doc/nuxt/NextStepsDoc.vue b/apps/showcase/doc/nuxt/NextStepsDoc.vue
new file mode 100644
index 000000000..7ba595332
--- /dev/null
+++ b/apps/showcase/doc/nuxt/NextStepsDoc.vue
@@ -0,0 +1,11 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Welcome to the Prime UI Ecosystem! Once you have PrimeVue up and running, we recommend exploring the following resources to gain a deeper understanding of the library.</p>
+        <ul class="leading-relaxed">
+            <li><NuxtLink to="/configuration" class="doc-link">Global configuration</NuxtLink></li>
+            <li><NuxtLink to="/theming/styled" class="doc-link">Customization of styles</NuxtLink></li>
+            <li><NuxtLink to="/passthrough" class="doc-link">Pass through attributes</NuxtLink></li>
+            <li><NuxtLink to="/support" class="doc-link">Getting support</NuxtLink></li>
+        </ul>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/doc/nuxt/StyleDoc.vue b/apps/showcase/doc/nuxt/StyleDoc.vue
deleted file mode 100644
index 1745b56fc..000000000
--- a/apps/showcase/doc/nuxt/StyleDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Module is used to configure the PrimeVue options, register components, directives and composables. CSS configuration of the styled mode is not included at the moment due to the upcoming enhancements like moving theming to core with CSS
-            variables. In styled mode, the theme can be defined at Nuxt configuration with the <i>css</i> property. Note that this only applies to styled mode, in unstyled mode a theme file is not required as styling is done externally.
-        </p>
-        <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
-        <p>
-            Until the new styled mode implementation is ready, dynamic theming at runtime is currently done by switching theme css files. Visit the <NuxtLink to="/theming/#switchthemes">Switch Themes</NuxtLink>
-            section at styled mode for an example.
-        </p>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-export default defineNuxtConfig({
-    css: ['primevue/resources/themes/aura-dark-green/theme.css']
-})
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/nuxt/ThemeDoc.vue b/apps/showcase/doc/nuxt/ThemeDoc.vue
new file mode 100644
index 000000000..e0930a54c
--- /dev/null
+++ b/apps/showcase/doc/nuxt/ThemeDoc.vue
@@ -0,0 +1,33 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Configure the module to use a theme like Aura.</p>
+        <DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Aura from '@primevue/themes/aura';
+
+export default defineNuxtConfig({
+    modules: [
+        '@primevue/nuxt-module'
+    ],
+    primevue: {
+        options: {
+            theme: {
+                preset: Aura
+            }
+        }
+    }
+})
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/nuxt/UsageDoc.vue b/apps/showcase/doc/nuxt/VerifyDoc.vue
similarity index 73%
rename from apps/showcase/doc/nuxt/UsageDoc.vue
rename to apps/showcase/doc/nuxt/VerifyDoc.vue
index ff8fc2f74..0fd090057 100644
--- a/apps/showcase/doc/nuxt/UsageDoc.vue
+++ b/apps/showcase/doc/nuxt/VerifyDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The nuxt-primevue module registers the components automatically so you may start using them instantly.</p>
+        <p>The nuxt-primevue module registers the components automatically with tree-shaking support so you may start using them instantly.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Button label="Check" icon="pi pi-check" />
+        <Button label="Verify" />
     </div>
     <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
@@ -14,7 +14,7 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Check" icon="pi pi-check" />
+<Button label="Verify" />
 `
             }
         };
diff --git a/apps/showcase/doc/nuxt/configuration/UsePrimeVueDoc.vue b/apps/showcase/doc/nuxt/configuration/UsePrimeVueDoc.vue
index d1d8ddc5b..5ef2050e5 100644
--- a/apps/showcase/doc/nuxt/configuration/UsePrimeVueDoc.vue
+++ b/apps/showcase/doc/nuxt/configuration/UsePrimeVueDoc.vue
@@ -12,7 +12,7 @@ export default {
             code: {
                 basic: `
 primevue: {
-    usePrimeVue: true
+    usePrimeVue: true | false
 }
 `
             }
diff --git a/apps/showcase/doc/passthrough/IntroductionDoc.vue b/apps/showcase/doc/passthrough/IntroductionDoc.vue
index 5656e972f..11afef901 100644
--- a/apps/showcase/doc/passthrough/IntroductionDoc.vue
+++ b/apps/showcase/doc/passthrough/IntroductionDoc.vue
@@ -6,8 +6,8 @@
         </p>
         <p>
             Vision of PrimeTek is <i>Your components, not ours</i>. The pass through feature is a key element to implement this vision by exposing the component internals in order to apply arbitrary attributes and listeners to the DOM elements. The
-            main advantage of this approach is that it prevents you from being locked into the component author. We recommend considering the pass-through feature whenever you need to tailor a component that lacks a built-in feature for your specific
-            requirement.
+            primary advantage of this approach is that it frees you from being restricted by the main component API. We recommend considering the pass-through feature whenever you need to tailor a component that lacks a built-in feature for your
+            specific requirement.
         </p>
         <p>Two videos are available at PrimeTV youtube channel, first one is an introduction and second one covers a unique case that is solved by the pass-through.</p>
     </DocSectionText>
diff --git a/apps/showcase/doc/vite/DownloadDoc.vue b/apps/showcase/doc/vite/DownloadDoc.vue
index d9fb3b453..e62e9dbd2 100644
--- a/apps/showcase/doc/vite/DownloadDoc.vue
+++ b/apps/showcase/doc/vite/DownloadDoc.vue
@@ -12,13 +12,13 @@ export default {
             code: {
                 basic: `
 # Using npm
-npm install primevue
+npm install primevue @primevue/themes
 
 # Using yarn
-yarn add primevue
+yarn add primevue @primevue/themes
 
 # Using pnpm
-pnpm add primevue
+pnpm add primevue @primevue/themes
 `
             }
         };
diff --git a/apps/showcase/doc/vite/NextStepsDoc.vue b/apps/showcase/doc/vite/NextStepsDoc.vue
new file mode 100644
index 000000000..5c90c9e4f
--- /dev/null
+++ b/apps/showcase/doc/vite/NextStepsDoc.vue
@@ -0,0 +1,12 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Welcome to the Prime UI Ecosystem! Once you have PrimeVue up and running, we recommend exploring the following resources to gain a deeper understanding of the library.</p>
+        <ul class="leading-relaxed">
+            <li><NuxtLink to="/configuration" class="doc-link">Global configuration</NuxtLink></li>
+            <li><NuxtLink to="/autoimport" class="doc-link">Auto imports with tree-shaking</NuxtLink></li>
+            <li><NuxtLink to="/theming/styled" class="doc-link">Customization of styles</NuxtLink></li>
+            <li><NuxtLink to="/passthrough" class="doc-link">Pass through attributes</NuxtLink></li>
+            <li><NuxtLink to="/support" class="doc-link">Getting support</NuxtLink></li>
+        </ul>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/doc/vite/PluginDoc.vue b/apps/showcase/doc/vite/PluginDoc.vue
index 84fdc2d39..0dd0d8c8c 100644
--- a/apps/showcase/doc/vite/PluginDoc.vue
+++ b/apps/showcase/doc/vite/PluginDoc.vue
@@ -1,9 +1,6 @@
 <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>
+        <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, and only utilized for configuration purposes.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
diff --git a/apps/showcase/doc/vite/StyledModeDoc.vue b/apps/showcase/doc/vite/StyledModeDoc.vue
deleted file mode 100644
index 69bc1db1d..000000000
--- a/apps/showcase/doc/vite/StyledModeDoc.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Styled mode provides pre-skinned components, default theme is Aura with emerald as the primary color. See the <NuxtLink to="/theming/styled">styled mode</NuxtLink> documentation for details.</p>
-        <p>Install the <i>@primevue/themes</i> add-on package as the themes are not included in PrimeVue by default.</p>
-        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
-        <p>Configure PrimeVue to use a theme like Aura.</p>
-        <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-# Using npm
-npm install @primevue/themes
-
-# Using yarn
-yarn add @primevue/themes
-
-# Using pnpm
-pnpm add @primevue/themes
-`
-            },
-            code2: {
-                basic: `
-import { createApp } from 'vue';
-import PrimeVue from 'primevue/config';
-import Aura from '@primevue/themes/aura';
-
-const app = createApp(App);
-app.use(PrimeVue, {
-    theme: {
-        preset: Aura
-    }
-});
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/vite/ThemeDoc.vue b/apps/showcase/doc/vite/ThemeDoc.vue
new file mode 100644
index 000000000..038895c17
--- /dev/null
+++ b/apps/showcase/doc/vite/ThemeDoc.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Configure PrimeVue to use a theme like Aura.</p>
+        <DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import { createApp } from 'vue';
+import PrimeVue from 'primevue/config';
+import Aura from '@primevue/themes/aura';
+
+const app = createApp(App);
+app.use(PrimeVue, {
+    theme: {
+        preset: Aura
+    }
+});
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/vite/UnstyledModeDoc.vue b/apps/showcase/doc/vite/UnstyledModeDoc.vue
deleted file mode 100644
index cb1449b99..000000000
--- a/apps/showcase/doc/vite/UnstyledModeDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            In unstyled mode, the components do not include any CSS so you'd need to style the components on your end, this is especially useful when building your own UI library on top of PrimeVue. Visit the
-            <NuxtLink to="/theming/unstyled">Unstyled mode</NuxtLink> documentation for more information and examples.
-        </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode 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
-});
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/vite/UsageDoc.vue b/apps/showcase/doc/vite/VerifyDoc.vue
similarity index 58%
rename from apps/showcase/doc/vite/UsageDoc.vue
rename to apps/showcase/doc/vite/VerifyDoc.vue
index baf3cf88c..c22c0405e 100644
--- a/apps/showcase/doc/vite/UsageDoc.vue
+++ b/apps/showcase/doc/vite/VerifyDoc.vue
@@ -1,13 +1,12 @@
 <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. If you prefer importing components automatically with
-            tree-shaking support , view the
-            <NuxtLink to="/autoimport">autoimport</NuxtLink> guide.
+            Verify your setup by adding a component such as <NuxtLink to="/button">Button</NuxtLink>. Each component can be imported and registered individually so that you only include what you use for bundle optimizization. Import path is available
+            in the documentation of the corresponding component.
         </p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Button label="Check" icon="pi pi-check" />
+        <Button label="Verify" />
     </div>
     <DocSectionCode :code="code" importCode />
 </template>
@@ -26,7 +25,7 @@ app.component('Button', Button);
                 options: `
 <template>
     <div class="card flex justify-center">
-        <Button label="Check" icon="pi pi-check" />
+        <Button label="Verify" />
     </div>
 </template>
 
@@ -36,7 +35,7 @@ app.component('Button', Button);
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <Button label="Check" icon="pi pi-check" />
+        <Button label="Verify" />
     </div>
 </template>
 
diff --git a/apps/showcase/pages/nuxt/index.vue b/apps/showcase/pages/nuxt/index.vue
index 5bed8b46e..f57a41171 100644
--- a/apps/showcase/pages/nuxt/index.vue
+++ b/apps/showcase/pages/nuxt/index.vue
@@ -21,10 +21,10 @@
 import AutoImportDoc from '@/doc/nuxt/AutoImportDoc.vue';
 import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
 import ExamplesDoc from '@/doc/nuxt/ExamplesDoc.vue';
-import SetupDoc from '@/doc/nuxt/SetupDoc.vue';
-import StyledModeDoc from '@/doc/nuxt/StyledModeDoc.vue';
-import UnstyledModeDoc from '@/doc/nuxt/UnstyledModeDoc.vue';
-import UsageDoc from '@/doc/nuxt/UsageDoc.vue';
+import ModuleDoc from '@/doc/nuxt/ModuleDoc.vue';
+import NextStepsDoc from '@/doc/nuxt/NextStepsDoc.vue';
+import ThemeDoc from '@/doc/nuxt/ThemeDoc.vue';
+import VerifyDoc from '@/doc/nuxt/VerifyDoc.vue';
 import ComponentsDoc from '@/doc/nuxt/configuration/ComponentsDoc.vue';
 import ComposablesDoc from '@/doc/nuxt/configuration/ComposablesDoc.vue';
 import DirectivesDoc from '@/doc/nuxt/configuration/DirectivesDoc.vue';
@@ -43,31 +43,19 @@ export default {
                     component: DownloadDoc
                 },
                 {
-                    id: 'setup',
-                    label: 'Setup',
-                    component: SetupDoc
+                    id: 'module',
+                    label: 'Module',
+                    component: ModuleDoc
                 },
                 {
-                    id: 'theming',
-                    label: 'Theming',
-                    description: 'PrimeVue has two styling modes; Styled and Unstyled. If you are just getting started, begin with the styled mode.',
-                    children: [
-                        {
-                            id: 'styled',
-                            label: 'Styled Mode',
-                            component: StyledModeDoc
-                        },
-                        {
-                            id: 'unstyled',
-                            label: 'Unstyled Mode',
-                            component: UnstyledModeDoc
-                        }
-                    ]
+                    id: 'theme',
+                    label: 'Theme',
+                    component: ThemeDoc
                 },
                 {
-                    id: 'usage',
-                    label: 'Usage',
-                    component: UsageDoc
+                    id: 'verify',
+                    label: 'Verify',
+                    component: VerifyDoc
                 },
                 {
                     id: 'configuration',
@@ -119,6 +107,11 @@ export default {
                     id: 'examples',
                     label: 'Examples',
                     component: ExamplesDoc
+                },
+                {
+                    id: 'nextsteps',
+                    label: 'Next Steps',
+                    component: NextStepsDoc
                 }
             ]
         };
diff --git a/apps/showcase/pages/vite/index.vue b/apps/showcase/pages/vite/index.vue
index a78e018d4..3698c4a9a 100644
--- a/apps/showcase/pages/vite/index.vue
+++ b/apps/showcase/pages/vite/index.vue
@@ -18,9 +18,10 @@
 <script>
 import DownloadDoc from '@/doc/vite/DownloadDoc.vue';
 import ExamplesDoc from '@/doc/vite/ExamplesDoc.vue';
-import StyledModeDoc from '@/doc/vite/StyledModeDoc.vue';
-import UnstyledModeDoc from '@/doc/vite/UnstyledModeDoc.vue';
-import UsageDoc from '@/doc/vite/UsageDoc.vue';
+import NextStepsDoc from '@/doc/vite/NextStepsDoc.vue';
+import PluginDoc from '@/doc/vite/PluginDoc.vue';
+import ThemeDoc from '@/doc/vite/ThemeDoc.vue';
+import VerifyDoc from '@/doc/vite/VerifyDoc.vue';
 import VideoDoc from '@/doc/vite/VideoDoc.vue';
 
 export default {
@@ -33,27 +34,19 @@ export default {
                     component: DownloadDoc
                 },
                 {
-                    id: 'plugin',
+                    id: 'theme',
                     label: 'Plugin',
-                    description:
-                        'PrimeVue plugin is required to be installed as an application plugin to set up the default configuration. The plugin is lightweight, only sets up the configuration object without affecting your application. PrimeVue has two styling modes; Styled and Unstyled. If you are just getting started, begin with the styled mode.',
-                    children: [
-                        {
-                            id: 'styled',
-                            label: 'Styled Mode',
-                            component: StyledModeDoc
-                        },
-                        {
-                            id: 'unstyled',
-                            label: 'Unstyled Mode',
-                            component: UnstyledModeDoc
-                        }
-                    ]
+                    component: PluginDoc
                 },
                 {
-                    id: 'usage',
-                    label: 'Usage',
-                    component: UsageDoc
+                    id: 'theme',
+                    label: 'Theme',
+                    component: ThemeDoc
+                },
+                {
+                    id: 'verify',
+                    label: 'Verify',
+                    component: VerifyDoc
                 },
                 {
                     id: 'examples',
@@ -64,6 +57,11 @@ export default {
                     id: 'video',
                     label: 'Video',
                     component: VideoDoc
+                },
+                {
+                    id: 'nextsteps',
+                    label: 'Next Steps',
+                    component: NextStepsDoc
                 }
             ]
         };

From 5e771cf9799a1b347c8a58e51f5c6f89e8523aae Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 27 Oct 2024 13:59:32 +0300
Subject: [PATCH 3/3] Cosmetics

---
 apps/showcase/assets/styles/layout/_docsearch.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/showcase/assets/styles/layout/_docsearch.scss b/apps/showcase/assets/styles/layout/_docsearch.scss
index 0d9b06863..2a7489950 100644
--- a/apps/showcase/assets/styles/layout/_docsearch.scss
+++ b/apps/showcase/assets/styles/layout/_docsearch.scss
@@ -41,6 +41,7 @@
             height: auto;
             width: auto;
             font-family: inherit;
+            box-shadow: none;
 
             &:first-child {
                 font-size: 0.75rem;