Add auto-import guide

assets/menu/menu.json

@@ -9,8 +9,8 @@
                     "to": "/introduction"
                 },
                 {
-                    "name": "Installation",
+                    "name": "Setup",
-                    "to": "/installation"
+                    "to": "/setup"
                 },
                 {
                     "name": "Playground",
@@ -44,6 +44,10 @@
                     "name": "Options",
                     "to": "/configuration"
                 },
+                {
+                    "name": "Auto Import",
+                    "to": "/autoimport"
+                },
                 {
                     "name": "CSS Layer",
                     "to": "/csslayer"

components/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">
-                            <PrimeVueNuxtLink to="/introduction" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Get Started</PrimeVueNuxtLink>
+                            <PrimeVueNuxtLink to="/setup" 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>

components/landing/HeroSection.vue

@@ -15,7 +15,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="/introduction" class="linkbox active font-semibold py-3 px-4">
+                    <PrimeVueNuxtLink to="/setup" class="linkbox active font-semibold py-3 px-4">
                         <span>Get Started</span>
                         <i class="pi pi-arrow-right ml-3"></i>
                     </PrimeVueNuxtLink>

doc/autoimport/ExampleDoc.vue

@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            A complete example using a PrimeVue and unplugin is available at <a href="https://github.com/primefaces/primevue-examples/tree/main/auto-import" rel="noopener noreferrer">primevue-examples</a> repository. You can also view this sample
+            live at <a href="https://stackblitz.com/edit/vitejs-vite-cbjzs7?file=vite.config.ts" target="_blank" rel="noopener noreferrer">Stackblitz</a>.
+        </p>
+    </DocSectionText>
+</template>

doc/autoimport/OverviewDoc.vue

@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PrimeVue components need to be imported and configured individually. In the next section, we'll cleanup the code using auto imports.</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";
+import InputText from 'primevue/inputtext';
+import Button from 'primevue/button';
+import App from './App.vue'
+const app = createApp(App);
+
+app.use(PrimeVue);
+app.component('InputText', InputText);
+app.component('Button', Button);
+`
+            }
+        };
+    }
+};
+</script>

doc/autoimport/UnpluginDoc.vue

@@ -0,0 +1,59 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The <a href="https://github.com/unplugin/unplugin-vue-components" target="_blank" rel="noopener noreferrer">unplugin-vue-components</a> library can automatically import and register PrimeVue components with the built-in resolver. Let's
+            begin with installing the library.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>Next step would be adding the <i>PrimeVueResolver</i> at vite.config using the <i>Components</i> plugin.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>
+            That's it, now the initialization code can be refactored as the following. For configuration like namespacing, visit the
+            <a href="https://github.com/unplugin/unplugin-vue-components?tab=readme-ov-file#configuration" target="_blank" rel="noopener noreferrer">official documentation</a>.
+        </p>
+        <DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+npm i unplugin-vue-components -D
+`
+            },
+            code2: {
+                basic: `
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite';
+import {PrimeVueResolver} from 'unplugin-vue-components/resolvers';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    Components({
+      resolvers: [
+        PrimeVueResolver()
+      ]
+    })]
+})
+`
+            },
+            code3: {
+                basic: `
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+import App from './App.vue'
+const app = createApp(App);
+
+app.use(PrimeVue);
+`
+            }
+        };
+    }
+};
+</script>

pages/autoimport/index.vue

@@ -0,0 +1,46 @@
+<template>
+    <Head>
+        <Title>Auto Import - PrimeVue</Title>
+        <Meta name="description" content="On-demand PrimeVue components with auto importing." />
+    </Head>
+    <div class="doc">
+        <div class="doc-main">
+            <div class="doc-intro">
+                <h1>Auto Import</h1>
+                <p>On-demand PrimeVue components with auto importing.</p>
+            </div>
+            <DocSections :docs="docs" />
+        </div>
+        <DocSectionNav :docs="docs" />
+    </div>
+</template>
+
+<script>
+import ExampleDoc from '@/doc/autoimport/ExampleDoc.vue';
+import OverviewDoc from '@/doc/autoimport/OverviewDoc.vue';
+import UnpluginDoc from '@/doc/autoimport/UnpluginDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'overview',
+                    label: 'Overview',
+                    component: OverviewDoc
+                },
+                {
+                    id: 'unplugin',
+                    label: 'Unplugin',
+                    component: UnpluginDoc
+                },
+                {
+                    id: 'example',
+                    label: 'Example',
+                    component: ExampleDoc
+                }
+            ]
+        };
+    }
+};
+</script>

pages/setup/index.vue

@@ -1,12 +1,12 @@
 <template>
     <Head>
-        <Title>Installation - PrimeVue</Title>
+        <Title>Setup - PrimeVue</Title>
-        <Meta name="description" content="Installation guides for popular development environments." />
+        <Meta name="description" content="Setup guides for popular development environments." />
     </Head>
     <div class="doc">
         <div class="doc-main">
             <div class="doc-intro">
-                <h1>Installation</h1>
+                <h1>Setup</h1>
                 <p>Installation guides for popular development environments.</p>
             </div>
             <DocSections :docs="docs" />
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import GuidesDoc from '@/doc/installation/GuidesDoc.vue';
+import GuidesDoc from '@/doc/setup/GuidesDoc.vue';
 
 export default {
     data() {