New Nuxt docs

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>