Documentation updates

doc/installation/PluginDoc.vue

@@ -0,0 +1,22 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PrimeVue plugin is required to be installed with the <i>use</i> function to set up the default <NuxtLink to="/theming">configuration</NuxtLink>.</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/theming/ArchitectureDoc.vue

@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p class="line-height-3 bg-indigo-600 text-white p-3 text-lg" style="border-radius: 10px">
             <strong>Note</strong>: In upcoming versions, theming architecture will be redesigned to utilize CSS variables instead of SCSS variables in a backward compatible way for a dynamic approach. In addition, a new <strong>Unstyled</strong> mode
-            will be provided as an optional approach to replace default styling so that CSS libraries like Tailwind or Bootstrap can be used to style the components. This work is planned to be completed by the end of Q2 2023.
+            will be provided as an alternative to the default styling so that CSS libraries like Tailwind or Bootstrap can be used to style the components. This work is planned to be completed by the end of Q2 2023.
         </p>
         <p>
             PrimeVue is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been separated into two parts, core and theme. The core resides

doc/theming/CSSVariablesDoc.vue

@@ -0,0 +1,5 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Each PrimeVue theme exports numerous CSS variables, refer to <NuxtLink to="/colors">Colors</NuxtLink> page for more details.</p>
+    </DocSectionText>
+</template>

pages/installation/index.vue

@@ -19,6 +19,7 @@
 import DownloadDoc from '@/doc/installation/DownloadDoc';
 import ExamplesDoc from '@/doc/installation/ExamplesDoc';
 import NuxtIntegrationDoc from '@/doc/installation/NuxtIntegrationDoc';
+import PluginDoc from '@/doc/installation/PluginDoc';
 import PropCasesDoc from '@/doc/installation/PropCasesDoc';
 import StylesDoc from '@/doc/installation/StylesDoc';
 import UsageDoc from '@/doc/installation/UsageDoc';
@@ -34,6 +35,11 @@ export default {
                     label: 'Download',
                     component: DownloadDoc
                 },
+                {
+                    id: 'plugin',
+                    label: 'Plugin',
+                    component: PluginDoc
+                },
                 {
                     id: 'styles',
                     label: 'Styles',

pages/theming/index.vue

@@ -27,6 +27,7 @@ import PrimeFlexDoc from '@/doc/theming/PrimeFlexDoc';
 import ScaleDoc from '@/doc/theming/ScaleDoc';
 import ScopedCSSDoc from '@/doc/theming/ScopedCSSDoc';
 import UtilsDoc from '@/doc/theming/UtilsDoc';
+import CSSVariablesDoc from '../../doc/theming/CSSVariablesDoc';
 import SwitchThemesDoc from '../../doc/theming/SwitchThemesDoc';
 
 export default {
@@ -77,6 +78,11 @@ export default {
                     id: 'utils',
                     label: 'Utils',
                     component: UtilsDoc
+                },
+                {
+                    id: 'cssvariables',
+                    label: 'CSS Variables',
+                    component: CSSVariablesDoc
                 }
             ]
         };