mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-10 01:12:37 +00:00
3ce7f69a9d
In the documentation for configuring the Nuxt module components, there is no indication that Chart and Editor are excluded by default. The only way to find out is if you happen upon a single issue in the github repo of the nuxt module npm package or read the full source code of the module. Although the intention of this default behavior is to avoid compatibility issues because of the dependencies of those 2 components, it leads to even more confusion when you know what they need but they aren't being detected as components. They are excluded even if you use the * option in include. This change introduces a helpful tip into the docs page so users know what to do when they want to use those components.
76 lines
2.4 KiB
Vue
76 lines
2.4 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 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 hideStackBlitz />
|
|
<p>By default, for compatibility reasons, Chart and Editor components are excluded. To include them simply set the <i>exclude</i> option to an empty list.</p>
|
|
<DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
|
|
<p>Use the <i>prefix</i> option to give a prefix to the registered component names.</p>
|
|
<DocSectionCode :code="code4" importCode hideToggleCode 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="code5" importCode hideToggleCode 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: {
|
|
exclude: []
|
|
}
|
|
}
|
|
`
|
|
},
|
|
code4: {
|
|
basic: `
|
|
primevue: {
|
|
components: {
|
|
prefix: 'Prime'
|
|
include: ['Button', 'DataTable'] /* Used as <PrimeButton /> and <PrimeDataTable /> */
|
|
}
|
|
}
|
|
`
|
|
},
|
|
code5: {
|
|
basic: `
|
|
primevue: {
|
|
components: {
|
|
name: ({ name, as, from }) => {
|
|
return name === 'Button' ? \`My\${name}\` : name;
|
|
},
|
|
include: ['Button', 'DataTable'] /* Used as <MyButton /> and <DataTable /> */
|
|
}
|
|
}
|
|
`
|
|
}
|
|
};
|
|
}
|
|
};
|
|
</script>
|