From c3d791be085c72b3f861e5d516a39df42324c2a7 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 24 Jan 2024 15:49:48 +0300
Subject: [PATCH] Add auto-import guide

---
 assets/menu/menu.json                     |  8 ++-
 components/landing/FooterSection.vue      |  2 +-
 components/landing/HeroSection.vue        |  2 +-
 doc/autoimport/ExampleDoc.vue             |  8 +++
 doc/autoimport/OverviewDoc.vue            | 29 +++++++++++
 doc/autoimport/UnpluginDoc.vue            | 59 +++++++++++++++++++++++
 doc/{installation => setup}/GuidesDoc.vue |  0
 pages/autoimport/index.vue                | 46 ++++++++++++++++++
 pages/{installation => setup}/index.vue   |  8 +--
 9 files changed, 154 insertions(+), 8 deletions(-)
 create mode 100644 doc/autoimport/ExampleDoc.vue
 create mode 100644 doc/autoimport/OverviewDoc.vue
 create mode 100644 doc/autoimport/UnpluginDoc.vue
 rename doc/{installation => setup}/GuidesDoc.vue (100%)
 create mode 100644 pages/autoimport/index.vue
 rename pages/{installation => setup}/index.vue (71%)

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index a78f86d74..1f54976eb 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -9,8 +9,8 @@
                     "to": "/introduction"
                 },
                 {
-                    "name": "Installation",
-                    "to": "/installation"
+                    "name": "Setup",
+                    "to": "/setup"
                 },
                 {
                     "name": "Playground",
@@ -44,6 +44,10 @@
                     "name": "Options",
                     "to": "/configuration"
                 },
+                {
+                    "name": "Auto Import",
+                    "to": "/autoimport"
+                },
                 {
                     "name": "CSS Layer",
                     "to": "/csslayer"
diff --git a/components/landing/FooterSection.vue b/components/landing/FooterSection.vue
index 4bd7be466..772d3c3d6 100644
--- a/components/landing/FooterSection.vue
+++ b/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>
diff --git a/components/landing/HeroSection.vue b/components/landing/HeroSection.vue
index c1627036d..0e675231f 100644
--- a/components/landing/HeroSection.vue
+++ b/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>
diff --git a/doc/autoimport/ExampleDoc.vue b/doc/autoimport/ExampleDoc.vue
new file mode 100644
index 000000000..c44aaa3f8
--- /dev/null
+++ b/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>
diff --git a/doc/autoimport/OverviewDoc.vue b/doc/autoimport/OverviewDoc.vue
new file mode 100644
index 000000000..da7dfc596
--- /dev/null
+++ b/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>
diff --git a/doc/autoimport/UnpluginDoc.vue b/doc/autoimport/UnpluginDoc.vue
new file mode 100644
index 000000000..ed7a99885
--- /dev/null
+++ b/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>
diff --git a/doc/installation/GuidesDoc.vue b/doc/setup/GuidesDoc.vue
similarity index 100%
rename from doc/installation/GuidesDoc.vue
rename to doc/setup/GuidesDoc.vue
diff --git a/pages/autoimport/index.vue b/pages/autoimport/index.vue
new file mode 100644
index 000000000..5a82fa45c
--- /dev/null
+++ b/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>
diff --git a/pages/installation/index.vue b/pages/setup/index.vue
similarity index 71%
rename from pages/installation/index.vue
rename to pages/setup/index.vue
index c0fba8045..8778e69e4 100644
--- a/pages/installation/index.vue
+++ b/pages/setup/index.vue
@@ -1,12 +1,12 @@
 <template>
     <Head>
-        <Title>Installation - PrimeVue</Title>
-        <Meta name="description" content="Installation guides for popular development environments." />
+        <Title>Setup - PrimeVue</Title>
+        <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() {