From 18576538e7b8cce62f66fd4e5abb4a71937b75f3 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 15 Oct 2023 23:57:44 +0300
Subject: [PATCH] New Nuxt docs

---
 assets/menu/menu.json                     |  5 ++
 doc/installation/DownloadDoc.vue          | 15 ++--
 doc/installation/NuxtIntegrationDoc.vue   | 49 ------------
 doc/nuxt/DownloadDoc.vue                  | 29 +++++++
 doc/nuxt/ExampleDoc.vue                   |  7 ++
 doc/nuxt/SetupDoc.vue                     | 64 +++++++++++++++
 doc/nuxt/StyleDoc.vue                     | 29 +++++++
 doc/nuxt/VideoDoc.vue                     |  8 ++
 doc/nuxt/configuration/ComponentsDoc.vue  | 72 +++++++++++++++++
 doc/nuxt/configuration/ComposablesDoc.vue | 26 ++++++
 doc/nuxt/configuration/DirectivesDoc.vue  | 51 ++++++++++++
 doc/nuxt/configuration/OptionsDoc.vue     | 31 ++++++++
 doc/nuxt/configuration/UsePrimeVueDoc.vue | 24 ++++++
 pages/installation/index.vue              |  6 --
 pages/nuxt/index.vue                      | 97 +++++++++++++++++++++++
 15 files changed, 452 insertions(+), 61 deletions(-)
 delete mode 100644 doc/installation/NuxtIntegrationDoc.vue
 create mode 100644 doc/nuxt/DownloadDoc.vue
 create mode 100644 doc/nuxt/ExampleDoc.vue
 create mode 100644 doc/nuxt/SetupDoc.vue
 create mode 100644 doc/nuxt/StyleDoc.vue
 create mode 100644 doc/nuxt/VideoDoc.vue
 create mode 100644 doc/nuxt/configuration/ComponentsDoc.vue
 create mode 100644 doc/nuxt/configuration/ComposablesDoc.vue
 create mode 100644 doc/nuxt/configuration/DirectivesDoc.vue
 create mode 100644 doc/nuxt/configuration/OptionsDoc.vue
 create mode 100644 doc/nuxt/configuration/UsePrimeVueDoc.vue
 create mode 100644 pages/nuxt/index.vue

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index 7e46acdaa..8be8fc759 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -11,6 +11,11 @@
                 {
                     "name": "Configuration",
                     "to": "/configuration"
+                },
+                {
+                    "name": "Nuxt",
+                    "to": "/nuxt",
+                    "badge": "NEW"
                 }
             ]
         },
diff --git a/doc/installation/DownloadDoc.vue b/doc/installation/DownloadDoc.vue
index 2ee2b59c0..f2ed1ea96 100644
--- a/doc/installation/DownloadDoc.vue
+++ b/doc/installation/DownloadDoc.vue
@@ -1,8 +1,8 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>PrimeVue is available for download at <a href="https://www.npmjs.com/package/primevue">npm</a>.</p>
+        <p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a>.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
@@ -11,11 +11,14 @@ export default {
         return {
             code: {
                 basic: `
-// with npm
-npm install primevue
+# Using npm
+npm install --save-dev nuxt-primevue
 
-// with yarn
-yarn add primevue
+# Using yarn
+yarn add --dev nuxt-primevue
+
+# Using pnpm
+pnpm add -D nuxt-primevue
 `
             }
         };
diff --git a/doc/installation/NuxtIntegrationDoc.vue b/doc/installation/NuxtIntegrationDoc.vue
deleted file mode 100644
index 80db67358..000000000
--- a/doc/installation/NuxtIntegrationDoc.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>PrimeVue can easily be used with Nuxt 3 using a custom plugin.</p>
-
-        <h3>nuxt.config.js</h3>
-        <p>Open the nuxt configuration file and add the css dependencies. This step is only required when using styled mode and can be ignored in unstyled mode.</p>
-
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-
-        <h3>primevue.js</h3>
-        <p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>
-
-        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-export default defineNuxtConfig({
-    css: [
-        "primevue/resources/themes/lara-light-teal/theme.css"
-    ],
-	build: {
-		transpile: ["primevue"]
-	}
-})
-`
-            },
-            code2: {
-                basic: `
-import { defineNuxtPlugin } from "#app";
-import PrimeVue from "primevue/config";
-import Button from "primevue/button";
-
-export default defineNuxtPlugin((nuxtApp) => {
-    nuxtApp.vueApp.use(PrimeVue, { ripple: true });
-    nuxtApp.vueApp.component("Button", Button);
-    //other components that you need
-});
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/nuxt/DownloadDoc.vue b/doc/nuxt/DownloadDoc.vue
new file mode 100644
index 000000000..289c27fa9
--- /dev/null
+++ b/doc/nuxt/DownloadDoc.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The <a href="https://www.npmjs.com/package/nuxt-primevue" target="_blank" rel="noopener noreferrer">nuxt-prime</a> package is the official module by PrimeTek.
+        </p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+# Using npm
+npm install --save-dev nuxt-primevue
+
+# Using yarn
+yarn add --dev nuxt-primevue
+
+# Using pnpm
+pnpm add -D nuxt-primevue
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/nuxt/ExampleDoc.vue b/doc/nuxt/ExampleDoc.vue
new file mode 100644
index 000000000..3bc41f50b
--- /dev/null
+++ b/doc/nuxt/ExampleDoc.vue
@@ -0,0 +1,7 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            A sample <a href="https://github.com/primefaces/primevue-examples/tree/main/nuxt-quickstart" rel="noopener noreferrer">starter example</a> is available at PrimeVue examples repository.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/nuxt/SetupDoc.vue b/doc/nuxt/SetupDoc.vue
new file mode 100644
index 000000000..f89bdc905
--- /dev/null
+++ b/doc/nuxt/SetupDoc.vue
@@ -0,0 +1,64 @@
+<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: {},
+        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/StyleDoc.vue b/doc/nuxt/StyleDoc.vue
new file mode 100644
index 000000000..872f522cf
--- /dev/null
+++ b/doc/nuxt/StyleDoc.vue
@@ -0,0 +1,29 @@
+<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 hideCodeSandbox 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/lara-dark-teal/theme.css']
+})
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/nuxt/VideoDoc.vue b/doc/nuxt/VideoDoc.vue
new file mode 100644
index 000000000..160b69c70
--- /dev/null
+++ b/doc/nuxt/VideoDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A video tutorial that goes through steps of setting up PrimeVue with the nuxt-primevue module.</p>
+    </DocSectionText>
+    <div class="video-container">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/sYGMrRUz9N0" frameborder="0" allowfullscreen></iframe>
+    </div>
+</template>
diff --git a/doc/nuxt/configuration/ComponentsDoc.vue b/doc/nuxt/configuration/ComponentsDoc.vue
new file mode 100644
index 000000000..05eee21b1
--- /dev/null
+++ b/doc/nuxt/configuration/ComponentsDoc.vue
@@ -0,0 +1,72 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The components to import and register are defined with the <i>include</i> option using a string array. When the value is ignored
+            or set using the <i>*</i> alias, all of the components are registered.
+        </p>
+        <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <p>
+            In case all components are imported, particular components can still be excluded with the <i>exclude</i> option.
+        </p>
+        <DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <p>
+            Use the <i>prefix</i> option to give a prefix to the registered component names.
+        </p>
+        <DocSectionCode :code="code3" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <p>
+            Component registration can be customized further by implementing the <i>name</i> function that 
+            gets an object representing the import metadata. <i>name</i> is the label of the component, <i>as</i> is the default export name and <i>from</i> is the import path.
+        </p>
+        <DocSectionCode :code="code4" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+primevue: { 
+    components: {
+        include: ['Button', 'DataTable']
+    }
+}
+`
+            },
+            code2: {
+                basic: `
+primevue: { 
+    components: {
+        include: '*',
+        exclude: ['Galleria', 'Carousel']
+    }
+}
+`
+            },
+            code3: {
+                basic: `
+primevue: { 
+    components: {
+        prefix: 'Prime'
+        include: ['Button', 'DataTable']    /* Used as <PrimeButton /> and <DataTable /> */
+    }
+}
+`
+            },
+            code4: {
+                basic: `
+primevue: { 
+    components: {
+        name: ({ name: string, as: string, from: string }) => {
+            return name === 'Button' ? \`My\${name}\` : name;
+        }
+        include: ['Button', 'DataTable']    /* Used as <MyButton /> and <DataTable /> */
+    }
+}
+`
+            }
+        }
+    }
+};
+</script>
diff --git a/doc/nuxt/configuration/ComposablesDoc.vue b/doc/nuxt/configuration/ComposablesDoc.vue
new file mode 100644
index 000000000..688c00527
--- /dev/null
+++ b/doc/nuxt/configuration/ComposablesDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Determines the composables to use, when default value is ignored or set as <i>*</i> all composables are imported. 
+        </p>
+        <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+primevue: { 
+    composables: {
+        include: ['useStyle']
+    }
+}
+`
+            }
+        }
+    }
+};
+</script>
diff --git a/doc/nuxt/configuration/DirectivesDoc.vue b/doc/nuxt/configuration/DirectivesDoc.vue
new file mode 100644
index 000000000..39f73ab6b
--- /dev/null
+++ b/doc/nuxt/configuration/DirectivesDoc.vue
@@ -0,0 +1,51 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The names of the directives to import and register are provided using the <i>include</i> property. When the value is ignored or set using the * alias, all of the directives are registered.
+        </p>
+        <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <p>
+            Similar to components, certain directives can be excluded and name registration can be customized.
+        </p>
+        <DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code3" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+primevue: { 
+    directives: {
+        include: ['Ripple', 'Tooltip']
+    }
+}
+`
+            },
+            code2: {
+                basic: `
+primevue: { 
+    directives: {
+        include: '*',
+        exclude: ['Ripple']
+    }
+}
+`
+            },
+            code3: {
+                basic: `
+primevue: { 
+    directives: {
+        prefix: 'p'
+        include: ['Ripple', 'Tooltip']    /* Used as v-pripple and v-ptooltip */
+    }
+}
+`
+            }
+        }
+    }
+};
+</script>
diff --git a/doc/nuxt/configuration/OptionsDoc.vue b/doc/nuxt/configuration/OptionsDoc.vue
new file mode 100644
index 000000000..bd47e8442
--- /dev/null
+++ b/doc/nuxt/configuration/OptionsDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Main configuration settings of PrimeVue, refer to the <PrimeVueNuxtLink to="/configuration">configuration</PrimeVueNuxtLink> documentation for details. Defaults to an empty object.
+        </p>
+    </DocSectionText>
+    <DocSectionCode :code="code" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+primevue: { 
+    options: {
+        unstyled: true,
+        ripple: true,
+        inputStyle: 'filled',
+        pt: {
+
+        }
+    }
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/nuxt/configuration/UsePrimeVueDoc.vue b/doc/nuxt/configuration/UsePrimeVueDoc.vue
new file mode 100644
index 000000000..d10ed413d
--- /dev/null
+++ b/doc/nuxt/configuration/UsePrimeVueDoc.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Whether to install the PrimeVue plugin, defaults to <i>true</i>. Disable this option if you prefer to configure PrimeVue manually e.g. with a Nuxt plugin.
+        </p>
+    </DocSectionText>
+    <DocSectionCode :code="code" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+primevue: { 
+    usePrimeVue: true 
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/installation/index.vue b/pages/installation/index.vue
index f679d3122..aee12e60c 100644
--- a/pages/installation/index.vue
+++ b/pages/installation/index.vue
@@ -18,7 +18,6 @@
 <script>
 import DownloadDoc from '@/doc/installation/DownloadDoc.vue';
 import ExamplesDoc from '@/doc/installation/ExamplesDoc.vue';
-import NuxtIntegrationDoc from '@/doc/installation/NuxtIntegrationDoc.vue';
 import PluginDoc from '@/doc/installation/PluginDoc.vue';
 import PropCasesDoc from '@/doc/installation/PropCasesDoc.vue';
 import StyledModeDoc from '@/doc/installation/StyledModeDoc.vue';
@@ -68,11 +67,6 @@ export default {
                     label: 'Prop Cases',
                     component: PropCasesDoc
                 },
-                {
-                    id: 'nuxtintegration',
-                    label: 'Nuxt Integration',
-                    component: NuxtIntegrationDoc
-                },
                 {
                     id: 'examples',
                     label: 'Examples',
diff --git a/pages/nuxt/index.vue b/pages/nuxt/index.vue
new file mode 100644
index 000000000..36bc1c2ca
--- /dev/null
+++ b/pages/nuxt/index.vue
@@ -0,0 +1,97 @@
+<template>
+    <div>
+        <Head>
+            <Title>Nuxt Module - PrimeVue</Title>
+            <Meta name="description" content="PrimeVue has seamless integration with Nuxt using an exclusive module." />
+        </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>
+                </div>
+                <DocSections :docs="docs" />
+            </div>
+            <DocSectionNav :docs="docs" />
+        </div>
+    </div>
+</template>
+
+<script>
+import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
+import SetupDoc from '@/doc/nuxt/SetupDoc.vue';
+import UsePrimeVueDoc from '@/doc/nuxt/configuration/UsePrimeVueDoc.vue';
+import OptionsDoc from '@/doc/nuxt/configuration/OptionsDoc.vue';
+import ComponentsDoc from '@/doc/nuxt/configuration/ComponentsDoc.vue';
+import DirectivesDoc from '@/doc/nuxt/configuration/DirectivesDoc.vue';
+import ComposablesDoc from '@/doc/nuxt/configuration/ComposablesDoc.vue';
+import StyleDoc from '@/doc/nuxt/StyleDoc.vue';
+import ExampleDoc from '@/doc/nuxt/ExampleDoc.vue';
+import VideoDoc from '../../doc/nuxt/VideoDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'download',
+                    label: 'Download',
+                    component: DownloadDoc
+                },
+                {
+                    id: 'setup',
+                    label: 'Setup',
+                    component: SetupDoc
+                },
+                {
+                    id: 'configuration',
+                    label: 'Configuration',
+                    children: [
+                        {
+                            id: 'useprimevue',
+                            label: 'usePrimeVue',
+                            component: UsePrimeVueDoc
+                        },
+                        {
+                            id: 'options',
+                            label: 'options',
+                            component: OptionsDoc
+                        },
+                        {
+                            id: 'components',
+                            label: 'components',
+                            component: ComponentsDoc
+                        },
+                        {
+                            id: 'directives',
+                            label: 'directives',
+                            component: DirectivesDoc
+                        },
+                        {
+                            id: 'composables',
+                            label: 'composables',
+                            component: ComposablesDoc
+                        },
+                    ]
+                },
+                {
+                    id: 'styles',
+                    label: 'Styles',
+                    component: StyleDoc
+                },
+                {
+                    id: 'video',
+                    label: 'Video',
+                    component: VideoDoc
+                },
+                {
+                    id: 'example',
+                    label: 'Example',
+                    component: ExampleDoc
+                }
+            ]
+        };
+    }
+};
+</script>