New Nuxt docs

assets/menu/menu.json

@@ -11,6 +11,11 @@
                 {
                     "name": "Configuration",
                     "to": "/configuration"
+                },
+                {
+                    "name": "Nuxt",
+                    "to": "/nuxt",
+                    "badge": "NEW"
                 }
             ]
         },

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
+# Using npm
-npm install primevue
+npm install --save-dev nuxt-primevue
 
-// with yarn
+# Using yarn
-yarn add primevue
+yarn add --dev nuxt-primevue
+
+# Using pnpm
+pnpm add -D nuxt-primevue
 `
             }
         };

doc/installation/NuxtIntegrationDoc.vue

@@ -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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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',

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>