Add vite and nuxt docs to get started

assets/menu/menu.json

@@ -5,17 +5,21 @@
             "icon": "pi pi-home",
             "children": [
                 {
-                    "name": "Installation",
+                    "name": "Introduction",
-                    "to": "/installation"
+                    "to": "/introduction"
+                },
+                {
+                    "name": "Vite Setup",
+                    "to": "/vite"
+                },
+                {
+                    "name": "Nuxt Setup",
+                    "to": "/nuxt"
                 },
                 {
                     "name": "Configuration",
                     "to": "/configuration"
                 },
-                {
-                    "name": "Nuxt",
-                    "to": "/nuxt"
-                },
                 {
                     "name": "Playground",
                     "to": "/playground"

doc/nuxt/DownloadDoc.vue

@@ -1,6 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The <a href="https://www.npmjs.com/package/nuxt-primevue" target="_blank" rel="noopener noreferrer">nuxt-primevue</a> package is the official module by PrimeTek.</p>
+        <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/nuxt-primevue" target="_blank" rel="noopener noreferrer">nuxt-primevue</a> module.
+        </p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
 </template>
@@ -12,12 +15,15 @@ export default {
             code: {
                 basic: `
 # Using npm
+npm install primevue
 npm install --save-dev nuxt-primevue
 
 # Using yarn
+yarn add primevue
 yarn add --dev nuxt-primevue
 
 # Using pnpm
+pnpm add primevue
 pnpm add -D nuxt-primevue
 `
             }

doc/nuxt/ModuleSetupDoc.vue

@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            In <i>nuxt.config</i> file, add the <i>nuxt-primevue</i> to the modules section and define <i>primevue</i> object for the configuration of the module. View the <NuxtLink to="/nuxt/#configuration">module configuration</NuxtLink> section
+            for the available list of options.
+        </p>
+        <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default defineNuxtConfig({
+    modules: [
+        'nuxt-primevue'
+    ],
+    primevue: {
+        /* Options */
+    }
+})
+`
+            }
+        };
+    }
+};
+</script>

doc/nuxt/SetupDoc.vue

@@ -1,62 +0,0 @@
-<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: {},
-        importPT: undefined,
-        cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities',
-        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/StyledModeDoc.vue

@@ -0,0 +1,81 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the
+            <NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
+        </p>
+        <p>You may use the <i>app.vue</i> file to import a theme using a script.</p>
+        <DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz />
+        <p>The style section may also be used with <i>@import</i>.</p>
+        <DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz />
+        <p>Another alternative would be the <i>css</i> option in <i>nuxt.config</i>.</p>
+        <DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>
+            The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
+            Normalize, or similar, a custom CSS layer configuration might be necessary with the <i>cssLayerOrder</i> option to make sure primevue layer is defined afterward. This only applies to Styled Mode as Unstyled Mode does not use any default
+            styles or layers. View the <NuxtLink to="/guides/csslayer">CSS Layer</NuxtLink> guide for more information.
+        </p>
+        <DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code5" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+<script>
+import 'primevue/resources/themes/lara-light-green/theme.csss'
+<\/script>
+`
+            },
+            code2: {
+                basic: `
+<style>
+@import url("primevue/resources/themes/lara-light-green/theme.css");
+<\/style>
+`
+            },
+            code3: {
+                basic: `
+export default defineNuxtConfig({
+    modules: [
+        'nuxt-primevue'
+    ],
+    primevue: {
+        /* Options */
+    },
+    css: ['primevue/resources/themes/lara-light-green/theme.css']
+})
+`
+            },
+            code4: {
+                basic: `
+/* Reset CSS */
+@layer reset {
+    button,
+    input {
+        /* CSS to Reset */
+    }
+}
+`
+            },
+            code5: {
+                basic: `
+export default defineNuxtConfig({
+    modules: [
+        'nuxt-primevue'
+    ],
+    primevue: {
+        cssLayerOrder: 'reset,primevue'
+    },
+    css: ['primevue/resources/themes/lara-light-green/theme.css']
+})
+`
+            }
+        };
+    }
+};
+</script>

doc/nuxt/UnstyledModeDoc.vue

@@ -0,0 +1,47 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Unstyled mode is disabled by default for all components. Set <i>unstyled</i> as true to enable it globally using a module configuration. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more information and
+            examples.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>In unstyled mode, you'd need to style the components on your end. If you are using Tailwind CSS, see the <a href="https://tailwind.primevue.org/nuxt/">Tailwind CSS Presets</a> project to get you started.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default defineNuxtConfig({
+    modules: [
+        'nuxt-primevue'
+    ],
+    primevue: {
+        unstyled: true
+    }
+})
+`
+            },
+            code2: {
+                basic: `
+import path from 'path';
+
+export default defineNuxtConfig({
+    modules: [
+        'nuxt-primevue'
+    ],
+    primevue: {
+        unstyled: true,
+        importPT: { from: path.resolve(__dirname, './presets/lara/') }      //import and apply preset   
+    }
+})
+`
+            }
+        };
+    }
+};
+</script>

doc/nuxt/UsageDoc.vue

@@ -0,0 +1,23 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The nuxt-primevue module registers the components automatically so you may start using them instantly. See the <NuxtLink to="/nuxt/#components">Components</NuxtLink> section to customize how the components are loaded and named.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Button label="Check" icon="pi pi-check" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Check" icon="pi pi-check" />
+`
+            }
+        };
+    }
+};
+</script>

doc/vite/DownloadDoc.vue

@@ -0,0 +1,27 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a>.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+# Using npm
+npm install primevue
+
+# Using yarn
+yarn add primevue
+
+# Using pnpm
+pnpm add primevue
+`
+            }
+        };
+    }
+};
+</script>

doc/vite/ExamplesDoc.vue

@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p class="mb-0">
+            We've created various samples for the popular options in the Vue ecosystem. Visit the <a href="https://github.com/primefaces/primevue-examples">primevue-examples</a> repository for more samples including
+            <a href="https://github.com/primefaces/primevue-examples/tree/main/vite-quickstart" target="_blank" rel="noopener noreferrer">vite-quickstart</a> and
+            <a href="https://github.com/primefaces/primevue-examples/tree/main/vite-ts-quickstart" target="_blank" rel="noopener noreferrer">vite-ts-quickstart</a>.
+        </p>
+    </DocSectionText>
+</template>

doc/vite/PluginDoc.vue

@@ -0,0 +1,27 @@
+<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>
+    </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';
+
+const app = createApp(App);
+app.use(PrimeVue);
+`
+            }
+        };
+    }
+};
+</script>

doc/vite/StyledModeDoc.vue

@@ -0,0 +1,44 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the
+            <NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>
+            The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
+            Normalize, or similar, a custom CSS layer configuration might be necessary. This only applies to Styled Mode as Unstyled Mode does not use any default styles or layers. View the <NuxtLink to="/guides/csslayer">CSS Layer</NuxtLink> guide
+            for more information.
+        </p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+//in main.js
+import 'primevue/resources/themes/lara-light-green/theme.css'
+`
+            },
+            code2: {
+                basic: `
+/* Order */
+@layer reset, primevue;
+
+/* Reset CSS */
+@layer reset {
+    button,
+    input {
+        /* CSS to Reset */
+    }
+}
+`
+            }
+        };
+    }
+};
+</script>

doc/vite/UnstyledModeDoc.vue

@@ -0,0 +1,44 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Unstyled mode is disabled by default for all components. Using the PrimeVue plugin during installation, set <i>unstyled</i> as true to enable it globally. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more
+            information and examples.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>In unstyled mode, you'd need to style the components on your end. If you are using Tailwind CSS, see the <a href="https://tailwind.primevue.org/vite/">Tailwind CSS Presets</a> project to get you started.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox 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 
+});
+`
+            },
+            code2: {
+                basic: `
+import { createApp } from 'vue';
+import PrimeVue from 'primevue/config';
+import Lara from '@/presets/lara';      //import preset        
+
+const app = createApp(App);
+app.use(PrimeVue, {
+    unstyled: true,
+    pt: Lara                            //apply preset        
+});
+`
+            }
+        };
+    }
+};
+</script>

doc/vite/UsageDoc.vue

@@ -0,0 +1,46 @@
+<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.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Button label="Check" icon="pi pi-check" />
+    </div>
+    <DocSectionCode :code="code" importCode />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Button from "primevue/button"
+
+const app = createApp(App);
+app.component('Button', Button);
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button label="Check" icon="pi pi-check" />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button label="Check" icon="pi pi-check" />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

doc/vite/videos/CreateVueDoc.vue

@@ -0,0 +1,11 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            <a alt="Create Vue App" href="https://github.com/vuejs/create-vue">Create-Vue</a>
+            is the recommended way to start a Vite-powered Vue project.
+        </p>
+    </DocSectionText>
+    <div class="video-container">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/FjYesOz95MM" frameborder="0" allowfullscreen></iframe>
+    </div>
+</template>

pages/nuxt/index.vue

@@ -1,15 +1,14 @@
 <template>
     <div>
         <Head>
-            <Title>Nuxt Module - PrimeVue</Title>
+            <Title>Install PrimeVue with Nuxt</Title>
-            <Meta name="description" content="PrimeVue has seamless integration with Nuxt using an exclusive module." />
+            <Meta name="description" content="Setting up PrimeVue in a Nuxt project" />
         </Head>
-
         <div class="doc">
             <div class="doc-main">
                 <div class="doc-intro">
-                    <h1>Nuxt</h1>
+                    <h1>Install PrimeVue with Nuxt</h1>
-                    <p>PrimeVue has seamless integration with Nuxt using the official module.</p>
+                    <p>Setting up PrimeVue in a Nuxt project.</p>
                 </div>
                 <DocSections :docs="docs" />
             </div>
@@ -20,9 +19,12 @@
 
 <script>
 import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
-import ExampleDoc from '@/doc/nuxt/ExampleDoc.vue';
+import ExamplesDoc from '@/doc/nuxt/ExamplesDoc.vue';
-import SetupDoc from '@/doc/nuxt/SetupDoc.vue';
+import ModuleSetupDoc from '@/doc/nuxt/ModuleSetupDoc.vue';
-import StyleDoc from '@/doc/nuxt/StyleDoc.vue';
+import StyledModeDoc from '@/doc/nuxt/StyledModeDoc.vue';
+import UnstyledModeDoc from '@/doc/nuxt/UnstyledModeDoc.vue';
+import UsageDoc from '@/doc/nuxt/UsageDoc.vue';
+import VideoDoc from '@/doc/nuxt/VideoDoc.vue';
 import CSSLayerOrderDoc from '@/doc/nuxt/configuration/CSSLayerOrderDoc.vue';
 import ComponentsDoc from '@/doc/nuxt/configuration/ComponentsDoc.vue';
 import ComposablesDoc from '@/doc/nuxt/configuration/ComposablesDoc.vue';
@@ -30,7 +32,6 @@ import DirectivesDoc from '@/doc/nuxt/configuration/DirectivesDoc.vue';
 import ImportPTDoc from '@/doc/nuxt/configuration/ImportPTDoc.vue';
 import OptionsDoc from '@/doc/nuxt/configuration/OptionsDoc.vue';
 import UsePrimeVueDoc from '@/doc/nuxt/configuration/UsePrimeVueDoc.vue';
-import VideoDoc from '../../doc/nuxt/VideoDoc.vue';
 
 export default {
     data() {
@@ -42,13 +43,35 @@ export default {
                     component: DownloadDoc
                 },
                 {
-                    id: 'setup',
+                    id: 'module-setup',
-                    label: 'Setup',
+                    label: 'Module Setup',
-                    component: SetupDoc
+                    component: ModuleSetupDoc
+                },
+                {
+                    id: 'theming',
+                    label: 'Theming',
+                    description: 'PrimeVue has two theming modes; styled or unstyled.',
+                    children: [
+                        {
+                            id: 'styled',
+                            label: 'Styled Mode',
+                            component: StyledModeDoc
+                        },
+                        {
+                            id: 'unstyled',
+                            label: 'Unstyled Mode',
+                            component: UnstyledModeDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'usage',
+                    label: 'Usage',
+                    component: UsageDoc
                 },
                 {
                     id: 'configuration',
-                    label: 'Configuration',
+                    label: 'Module Configuration',
                     children: [
                         {
                             id: 'useprimevue',
@@ -88,14 +111,9 @@ export default {
                     ]
                 },
                 {
-                    id: 'styles',
+                    id: 'examples',
-                    label: 'Styles',
+                    label: 'Examples',
-                    component: StyleDoc
+                    component: ExamplesDoc
-                },
-                {
-                    id: 'example',
-                    label: 'Example',
-                    component: ExampleDoc
                 },
                 {
                     id: 'video',

pages/vite/index.vue

@@ -0,0 +1,77 @@
+<template>
+    <Head>
+        <Title>Install PrimeVue with Vite</Title>
+        <Meta name="description" content="Setting up PrimeVue in a Vite project" />
+    </Head>
+    <div class="doc">
+        <div class="doc-main">
+            <div class="doc-intro">
+                <h1>Install PrimeVue with Vite</h1>
+                <p>Setting up PrimeVue in a Vite project.</p>
+            </div>
+            <DocSections :docs="docs" />
+        </div>
+        <DocSectionNav :docs="docs" />
+    </div>
+</template>
+
+<script>
+import DownloadDoc from '@/doc/vite/DownloadDoc.vue';
+import ExamplesDoc from '@/doc/vite/ExamplesDoc.vue';
+import PluginDoc from '@/doc/vite/PluginDoc.vue';
+import StyledModeDoc from '@/doc/vite/StyledModeDoc.vue';
+import UnstyledModeDoc from '@/doc/vite/UnstyledModeDoc.vue';
+import UsageDoc from '@/doc/vite/UsageDoc.vue';
+import CreateVueDoc from '@/doc/vite/videos/CreateVueDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'download',
+                    label: 'Download',
+                    component: DownloadDoc
+                },
+                {
+                    id: 'plugin',
+                    label: 'Plugin',
+                    component: PluginDoc
+                },
+                {
+                    id: 'theming',
+                    label: 'Theming',
+                    description: 'PrimeVue has two theming modes; styled or unstyled.',
+                    children: [
+                        {
+                            id: 'styled',
+                            label: 'Styled Mode',
+                            component: StyledModeDoc
+                        },
+                        {
+                            id: 'unstyled',
+                            label: 'Unstyled Mode',
+                            component: UnstyledModeDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'usage',
+                    label: 'Usage',
+                    component: UsageDoc
+                },
+                {
+                    id: 'examples',
+                    label: 'Examples',
+                    component: ExamplesDoc
+                },
+                {
+                    id: 'videos',
+                    label: 'Video Tutorial',
+                    component: CreateVueDoc
+                }
+            ]
+        };
+    }
+};
+</script>