使用 Nuxt 安装 PrimeVue

在 Nuxt 项目中设置 PrimeVue。

下载 #

PrimeVue 可在 npm 注册表上下载，以及官方的 nuxt-primevue 模块。


# Using npm
npm install primevue
npm install --save-dev @primevue/nuxt-module

# Using yarn
yarn add primevue
yarn add --dev @primevue/nuxt-module

# Using pnpm
pnpm add primevue
pnpm add -D @primevue/nuxt-module

设置 #

在 nuxt.config 文件中，将 @primevue/nuxt-module 添加到 modules 部分，并定义 primevue 对象以配置模块。


export default defineNuxtConfig({
    modules: [
        '@primevue/nuxt-module'
    ],
    primevue: {
        /* Configuration */
    }
})

主题 #

PrimeVue 具有两种样式模式：带样式和无样式。如果您刚入门，请从带样式模式开始。

带样式模式 #

带样式模式提供预先设置皮肤的组件，默认主题为 Aura，以翡翠色为主要颜色。有关详细信息，请参见带样式模式文档。

安装 @primevue/themes 附加组件包，因为主题默认情况下不包含在 PrimeVue 中。


# Using npm
npm install @primevue/themes

# Using yarn
yarn add @primevue/themes

# Using pnpm
pnpm add @primevue/themes

配置模块以使用像 Aura 这样的主题。


import Aura from '@primevue/themes/aura';

export default defineNuxtConfig({
    modules: [
        '@primevue/nuxt-module'
    ],
    primevue: {
        options: {
            theme: {
                preset: Aura
            }
        }
    }
})

无样式模式 #

在无样式模式下，组件不包含任何 CSS，因此您需要自己为组件设置样式，这在您在 PrimeVue 之上构建自己的 UI 库时特别有用。访问无样式模式文档以获取更多信息和示例。


export default defineNuxtConfig({
    modules: [
        '@primevue/nuxt-module'
    ],
    primevue: {
        options: {
            unstyled: true
        }
    }
})

用法 #

nuxt-primevue 模块会自动注册组件，因此您可以立即开始使用它们。


<Button label="Check" icon="pi pi-check" />

配置 #

usePrimeVue #

该模块默认情况下安装 PrimeVue 插件。如果您希望手动配置 PrimeVue（例如使用 Nuxt 插件），请禁用此选项。


primevue: {
    usePrimeVue: true
}

选项 #

PrimeVue 的主要配置设置，有关详细信息，请参阅配置文档。


import Aura from '@primevue/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
                }
            }
        }
    }
})

autoImport #

自动导入功能会自动注册组件，并支持树形摇动。默认值为 true，禁用后，请使用 components 和 directives 的 include/exclude 选项进行手动注册。


primevue: {
    autoImport: true|false
}

在 components 和 directives 中使用 prefix 为注册添加前缀。


primevue: {
    autoImport: true|false,
    components: {
        prefix: 'org'
    },
    directives: {
        prefix: 'org'
    }
}

importPT #

配置全局直通导入路径。


primevue: {
    importPT: { from: '@/passthrough/mycustompt.js')}
}

mycustompt.js 文件定义配置并将其导出。


const MyCustomPT = {
    ...
    button: {
        root: 'my-button',
       ...
    },
    ...
}

export default MyCustomPT;

importTheme #

配置主题配置路径，用于在带样式模式下自定义主题。


primevue: {
    importTheme: { from: '@/themes/mytheme.js' },
}

mytheme.js 文件包含主题配置。


import { definePreset } from '@primevue/themes';
import Aura from '@primevue/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'
    }
};

components #

当 autoImport 被禁用时，使用 include 和 exclude 进行手动注册。

要导入和注册的组件使用字符串数组在 include 选项中定义。当值被忽略或使用 * 别名设置时，所有组件都会被注册。


primevue: {
    components: {
        include: ['Button', 'DataTable']
    }
}

如果所有组件都被导入，仍然可以使用 exclude 选项排除特定组件。


primevue: {
    components: {
        include: '*',
        exclude: ['Galleria', 'Carousel']
    }
}

默认情况下，出于兼容性原因，图表和编辑器组件被排除在外。要包含它们，只需将 exclude 选项设置为空列表即可。


primevue: {
    components: {
        exclude: []
    }
}

使用 prefix 选项为注册的组件名称提供前缀。


primevue: {
    components: {
        prefix: 'Prime'
        include: ['Button', 'DataTable']    /* Used as <PrimeButton /> and <PrimeDataTable /> */
    }
}

组件注册可以通过实现 name 函数来进一步定制，该函数获取一个表示导入元数据的对象。name 是组件的标签，as 是默认导出名称，from 是导入路径。


primevue: {
    components: {
        name: ({ name, as, from }) => {
            return name === 'Button' ? `My${name}` : name;
        },
        include: ['Button', 'DataTable']    /* Used as <MyButton /> and <DataTable /> */
    }
}

directives #

当 autoImport 被禁用时，使用 include 和 exclude 进行手动注册。

要导入和注册的指令名称使用 include 属性提供。当值被忽略或使用 * 别名设置时，所有指令都会被注册。


primevue: {
    directives: {
        include: ['Ripple', 'Tooltip']
    }
}

与组件类似，可以排除某些指令，并且可以自定义名称注册。


primevue: {
    directives: {
        include: '*',
        exclude: ['Ripple']
    }
}


primevue: {
    directives: {
        prefix: 'p'
        include: ['Ripple', 'Tooltip']    /* Used as v-pripple and v-ptooltip */
    }
}

composables #

确定要使用的可组合项，当默认值被忽略或设置为 * 时，所有可组合项都会被导入。


primevue: {
    composables: {
        include: ['useStyle']
    }
}

示例 #

基于 Nuxt 的示例，具有不同的选项，可在 PrimeVue 示例存储库中找到。