安装
了解如何在 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']
})
建议为 VSCode 安装Tailwind CSS IntelliSense扩展并添加以下设置
.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 的模板。
通过运行以下命令在本地创建一个新项目
终端
npm create nuxt@latest -- -t ui
参数
<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 类。theme.defaultVariants 新
使用 theme.defaultVariants 选项来覆盖组件的默认 color 和 size 变体。
- 默认值:
{ color: 'primary', size: 'md'}
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
theme: {
defaultVariants: {
color: 'neutral',
size: 'sm'
}
}
}
})
持续发布
Nuxt UI 使用pkg.pr.new进行持续预览发布，为开发者提供即时访问最新功能和错误修复的能力，无需等待官方发布。
所有提交和拉取请求（PR）到 v3 分支都会自动创建预览版本。你可以通过将包版本替换为特定的提交哈希或 PR 号来使用它们。
package.json
{
"dependencies": {
- "@nuxt/ui": "^3.0.0",
+ "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@4c96909",
}
}
pkg.pr.new 将自动在 PR 上评论安装 URL，方便测试更改。