安装
了解如何在 Nuxt 应用中安装和配置 Nuxt UI。
安装设置
添加到 Nuxt 项目
安装 Nuxt UI 包
pnpm add @nuxt/ui
yarn add @nuxt/ui
npm install @nuxt/ui
bun add @nuxt/ui
在您的 nuxt.config.ts 文件中添加 Nuxt UI 模块
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
在您的 CSS 中导入 Tailwind CSS 和 Nuxt UI
@import "tailwindcss";
@import "@nuxt/ui";
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css']
})
建议安装Tailwind CSS IntelliSenseVSCode 扩展，并添加以下设置
.vscode/settings.json
{
"files.associations": {
"*.css": "tailwindcss"
},
"editor.quickSuggestions": {
"strings": "on"
},
"tailwindCSS.classAttributes": ["class", "ui"],
"tailwindCSS.experimental.classRegex": [
["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
]
}
使用 App 组件包裹您的应用
app.vue
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
使用我们的 Nuxt Starter
使用模板开始您的项目，该模板nuxt/starter#ui预先配置了 Nuxt UI。
通过运行以下命令在本地创建新项目
终端
npx nuxi init -t ui <my-app>
参数
<my-app> 是项目将被创建的目录名称，请将其替换为您项目的名称。安装完成后，进入您的项目并启动开发服务器
终端
cd <my-app>
npm run dev
选项
您可以通过在 nuxt.config.ts 中提供选项来定制 Nuxt UI。
prefix
使用 prefix 选项更改组件的前缀。
- 默认值：
U
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
prefix: 'Nuxt'
}
})
fonts
使用 fonts 选项来启用或禁用@nuxt/fonts模块。
- 默认值：
true
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
fonts: false
}
})
colorMode
使用 colorMode 选项来启用或禁用@nuxt/color-mode模块。
- 默认值：
true
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
colorMode: false
}
})
theme.colors
使用 theme.colors 选项定义用于生成组件主题的动态颜色别名。
- 默认值：
['primary', 'secondary', 'success', 'info', 'warning', 'error']
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
theme: {
colors: ['primary', 'error']
}
}
})
theme.transitions
使用 theme.transitions 选项来启用或禁用组件上的过渡效果。
- 默认值：
true
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
theme: {
transitions: false
}
}
})
此选项会为具有悬停或激活状态的组件添加
transition-colors CSS 类。持续发布
Nuxt UI 使用pkg.pr.new进行持续预览发布，让开发者无需等待正式发布即可立即获取最新特性和错误修复。
所有提交（commits）和针对 v3 分支的拉取请求（PRs）都会自动创建预览发布。通过将您的包版本替换为特定的提交哈希或 PR 号来使用它们。
package.json
{
"dependencies": {
- "@nuxt/ui": "^3.0.0",
+ "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@4c96909",
}
}
pkg.pr.new 会自动在拉取请求（PRs）上评论安装 URL，便于测试更改。