在 Nuxt 项目中配置 PrimeVue。
PrimeVue 可以从 npm 仓库下载，同时还提供官方的 @primevue/nuxt-module。
# 使用 npm
npm install primevue @primeuix/themes
npm install --save-dev @primevue/nuxt-module
# 使用 yarn
yarn add primevue @primeuix/themes
yarn add --dev @primevue/nuxt-module
# 使用 pnpm
pnpm add primevue @primeuix/themes
pnpm add -D @primevue/nuxt-module
在 nuxt.config 文件中，将 @primevue/nuxt-module 添加到 modules 部分，并定义 primevue 对象以配置该模块。
export default defineNuxtConfig({
modules: [
'@primevue/nuxt-module'
],
primevue: {
/* 配置 */
}
})
配置模块以使用像 Aura 这样的主题。
import Aura from '@primeuix/themes/aura';
export default defineNuxtConfig({
modules: [
'@primevue/nuxt-module'
],
primevue: {
options: {
theme: {
preset: Aura
}
}
}
})
nuxt-primevue 模块会自动注册组件并支持 tree-shaking，因此您可以立即开始使用它们。
<Button label="验证" />
该模块默认安装 PrimeVue 插件。如果您希望手动配置 PrimeVue（例如使用 Nuxt 插件），请禁用此选项。
primevue: {
usePrimeVue: true | false
}
PrimeVue 的主要配置设置，详情请参阅 配置 文档。
import Aura from '@primeuix/themes/aura';
export default defineNuxtConfig({
modules: [
'@primevue/nuxt-module'
],
primevue: {
options: {
ripple: true,
inputVariant: 'filled',
theme: {
preset: Aura,
options: {
prefix: 'p',
darkModeSelector: 'system',
cssLayer: false
}
}
}
}
})
自动导入 功能会自动注册组件并支持 tree shaking。默认为 true，当禁用时，请使用 components 和 directives 的 include/exclude 选项进行手动注册。
primevue: {
autoImport: true|false
}
在 components 和 directives 中使用 prefix 为注册添加前缀。
primevue: {
autoImport: true|false,
components: {
prefix: 'org'
},
directives: {
prefix: 'org'
}
}
配置全局透传导入路径。
primevue: {
importPT: { from: '@/passthrough/mycustompt.js' }
}
mycustompt.js 文件定义配置并导出它。
const MyCustomPT = {
...
button: {
root: 'my-button',
...
},
...
}
export default MyCustomPT;
配置样式模式下主题自定义的主题配置路径。
primevue: {
importTheme: { from: '@/themes/mytheme.js' },
}
mytheme.js 文件包含主题配置。
import { definePreset } from '@primeuix/themes';
import Aura from '@primeuix/themes/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 {
preset: MyPreset,
options: {
darkModeSelector: '.p-dark'
}
};
当 autoImport 被禁用时，使用 include 和 exclude 进行手动注册。
要导入和注册的组件通过 include 选项使用字符串数组定义。当值被忽略或使用 * 别名设置时，所有组件都会被注册。
primevue: {
components: {
include: ['Button', 'DataTable']
}
}
如果导入了所有组件，仍然可以使用 exclude 选项排除特定组件。
primevue: {
components: {
include: '*',
exclude: ['Galleria', 'Carousel']
}
}
默认情况下，出于兼容性考虑，Chart 和 Editor 组件被排除。要包含它们，只需将 exclude 选项设置为空列表。
primevue: {
components: {
exclude: []
}
}
使用 prefix 选项为注册的组件名称添加前缀。
primevue: {
components: {
prefix: 'Prime'
include: ['Button', 'DataTable'] /* 用作 <PrimeButton /> 和 <PrimeDataTable /> */
}
}
可以通过实现 name 函数进一步自定义组件注册，该函数获取表示导入元数据的对象。name 是组件的标签，as 是默认导出名称， from 是导入路径。
primevue: {
components: {
name: ({ name, as, from }) => {
return name === 'Button' ? `My${name}` : name;
},
include: ['Button', 'DataTable'] /* 用作 <MyButton /> 和 <DataTable /> */
}
}
当 autoImport 被禁用时，使用 include 和 exclude 进行手动注册。
要导入和注册的指令名称通过 include 属性提供。当值被忽略或使用 * 别名设置时，所有指令都会被注册。
primevue: {
directives: {
include: ['Ripple', 'Tooltip']
}
}
与组件类似，某些指令可以被排除，并且名称注册可以自定义。
primevue: {
directives: {
include: '*',
exclude: ['Ripple']
}
}
primevue: {
directives: {
prefix: 'p'
include: ['Ripple', 'Tooltip'] /* 用作 v-pripple 和 v-ptooltip */
}
}
确定要使用的组合式函数，当默认值被忽略或设置为 * 时，所有组合式函数都会被导入。
primevue: {
composables: {
include: ['useStyle']
}
}
在 PrimeVue 示例仓库中提供了不同选项的 基于 Nuxt 的示例。