Update nuxt docs

doc/nuxt/StyledModeDoc.vue

@@ -1,81 +0,0 @@
-<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 hideStackBlitz />
-        <p>The style section may also be used with <i>@import</i>.</p>
-        <DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
-        <p>Another alternative would be the <i>css</i> option in <i>nuxt.config</i>.</p>
-        <DocSectionCode :code="code3" hideToggleCode importCode 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="/csslayer">CSS Layer</NuxtLink> guide for more information.
-        </p>
-        <DocSectionCode :code="code4" hideToggleCode importCode hideStackBlitz />
-        <DocSectionCode :code="code5" hideToggleCode importCode hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-<script>
-import 'primevue/resources/themes/aura-light-green/theme.css'
-<\/script>
-`
-            },
-            code2: {
-                basic: `
-<style>
-@import url("primevue/resources/themes/aura-light-green/theme.css");
-<\/style>
-`
-            },
-            code3: {
-                basic: `
-export default defineNuxtConfig({
-    modules: [
-        'nuxt-primevue'
-    ],
-    primevue: {
-        /* Options */
-    },
-    css: ['primevue/resources/themes/aura-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/aura-light-green/theme.css']
-})
-`
-            }
-        };
-    }
-};
-</script>

doc/nuxt/UnstyledModeDoc.vue

@@ -1,49 +0,0 @@
-<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 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 hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-export default defineNuxtConfig({
-    modules: [
-        'nuxt-primevue'
-    ],
-    primevue: {
-        options: {
-            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/configuration/ImportThemeDoc.vue

@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Configures the theme configuration path for the customizations of a theme in styled mode.</p>
+        <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
+        <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+primevue: {
+    importTheme: { from: '@/themes/mytheme.js' },
+}
+`
+            },
+            code2: {
+                basic: `
+import { definePreset } from 'primevue/themes';
+import PrimeOne from 'primevue/themes/primeone';
+import Aura from 'primevue/themes/primeone/aura';
+
+const MyPreset = definePreset(Aura, {
+    semantic: {
+        primary: {
+            50: '{indigo.50}',
+            100: '{indigo.100}',
+            200: '{indigo.200}',
+            300: '{indigo.300}',
+            400: '{indigo.400}',
+            500: '{indigo.500}',
+            600: '{indigo.600}',
+            700: '{indigo.700}',
+            800: '{indigo.800}',
+            900: '{indigo.900}',
+            950: '{indigo.950}'
+        }
+    }
+});
+
+export default {
+    base: PrimeOne,
+    preset: MyPreset,
+    options: {
+        darkModeSelector: '.p-dark'
+    }
+};
+
+`
+            }
+        };
+    }
+};
+</script>

doc/nuxt/configuration/UnstyledDoc.vue

@@ -0,0 +1,22 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Defines the theming mode, defaults to false.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+primevue: {
+    unstyled: true
+}
+`
+            }
+        };
+    }
+};
+</script>

pages/nuxt/index.vue

@@ -21,16 +21,15 @@
 import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
 import ExamplesDoc from '@/doc/nuxt/ExamplesDoc.vue';
 import ModuleSetupDoc from '@/doc/nuxt/ModuleSetupDoc.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';
 import DirectivesDoc from '@/doc/nuxt/configuration/DirectivesDoc.vue';
 import ImportPTDoc from '@/doc/nuxt/configuration/ImportPTDoc.vue';
+import ImportThemeDoc from '@/doc/nuxt/configuration/ImportThemeDoc.vue';
 import OptionsDoc from '@/doc/nuxt/configuration/OptionsDoc.vue';
+import UnstyledDoc from '@/doc/nuxt/configuration/UnstyledDoc.vue';
 import UsePrimeVueDoc from '@/doc/nuxt/configuration/UsePrimeVueDoc.vue';
 
 export default {
@@ -47,23 +46,6 @@ export default {
                     label: 'Module Setup',
                     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',
@@ -78,6 +60,11 @@ export default {
                             label: 'usePrimeVue',
                             component: UsePrimeVueDoc
                         },
+                        {
+                            id: 'unstyled',
+                            label: 'unstyled',
+                            component: UnstyledDoc
+                        },
                         {
                             id: 'options',
                             label: 'options',
@@ -103,6 +90,11 @@ export default {
                             label: 'importPT',
                             component: ImportPTDoc
                         },
+                        {
+                            id: 'importtheme',
+                            label: 'importTheme',
+                            component: ImportThemeDoc
+                        },
                         {
                             id: 'layerorder',
                             label: 'cssLayerOrder',
@@ -114,11 +106,6 @@ export default {
                     id: 'examples',
                     label: 'Examples',
                     component: ExamplesDoc
-                },
-                {
-                    id: 'video',
-                    label: 'Video Tutorial',
-                    component: VideoDoc
                 }
             ]
         };