primevue-mirror/doc/nuxt/configuration/ComponentsDoc.vue

66 lines
2.1 KiB
Vue

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