安装
了解如何在 Vue 应用中安装和配置 Nuxt UI。
设置
添加到 Vue 项目
安装 Nuxt UI 包
pnpm add @nuxt/ui
yarn add @nuxt/ui
npm install @nuxt/ui
bun add @nuxt/ui
如果您正在使用 pnpm，请确保您在
.npmrc 文件中设置了shamefully-hoist=true在你的 .npmrc 文件中，或者在项目的根目录安装 tailwindcss、vue-router 和 @unhead/vue。在你的 vite.config.ts 中添加 Nuxt UI Vite 插件
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui()
]
})
Nuxt UI 注册了
unplugin-auto-import 和 unplugin-vue-components，它们会生成 auto-imports.d.ts 和 components.d.ts 类型声明文件。你很可能需要将这些文件添加到 .gitignore 并添加到你的 tsconfig 中。tsconfig.app.json
{
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"]
}
.gitignore
# Auto-generated type declarations
auto-imports.d.ts
components.d.ts
在内部，Nuxt UI 依赖自定义别名来解析主题类型。如果你正在使用 TypeScript，你应该在你的
tsconfig 中添加一个别名，以在你的 vite.config.ts 中启用自动补全。tsconfig.node.json
{
"compilerOptions": {
"paths": {
"#build/ui": [
"./node_modules/@nuxt/ui/.nuxt/ui"
]
}
}
}
在你的 main.ts 中使用 Nuxt UI Vue 插件
main.ts
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'
const app = createApp(App)
const router = createRouter({
routes: [],
history: createWebHistory()
})
app.use(router)
app.use(ui)
app.mount('#app')
在你的 CSS 中导入 Tailwind CSS 和 Nuxt UI
assets/main.css
@import "tailwindcss";
@import "@nuxt/ui";
在你的
main.ts 中导入 CSS 文件。main.ts
import './assets/main.css'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'
const app = createApp(App)
const router = createRouter({
routes: [],
history: createWebHistory()
})
app.use(router)
app.use(ui)
app.mount('#app')
建议为 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>
<RouterView />
</UApp>
</template>
在你的根容器中添加 isolate 类
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nuxt UI</title>
</head>
<body>
<div id="app" class="isolate"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
这确保了样式仅限于你的应用范围，并防止了叠加层和堆叠上下文的问题。
使用我们的 Vue 启动器
使用预配置 Nuxt UI 的nuxtlabs/nuxt-ui-vue-starter模板启动你的项目。
通过运行以下命令在本地创建一个新项目
终端
npm create nuxt@latest -- -t github:nuxtlabs/nuxt-ui-vue-starter
<my-app> 参数是项目将要创建的目录名称，请将其替换为你的项目名称。安装完成后，进入你的项目并启动开发服务器
终端
cd <my-app>
npm run dev
选项
你可以在 vite.config.ts 中提供选项来定制 Nuxt UI。
prefix
使用 prefix 选项更改组件的前缀。
- 默认值：
U
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
prefix: 'Nuxt'
})
]
})
ui
使用 ui 选项来为 Nuxt UI 提供配置。
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
colors: {
primary: 'green',
neutral: 'slate'
}
}
})
]
})
colorMode
使用 colorMode 选项来启用或禁用 @vueuse/core 的颜色模式集成。
- 默认值：
true
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
colorMode: false
})
]
})
theme.colors
使用 theme.colors 选项定义用于生成组件主题的动态颜色别名。
- 默认值：
['primary', 'secondary', 'success', 'info', 'warning', 'error']
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
theme: {
colors: ['primary', 'error']
}
})
]
})
theme.transitions
使用 theme.transitions 选项启用或禁用组件上的过渡。
- 默认值：
true
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
theme: {
transitions: false
}
})
]
})
此选项会在具有悬停或激活状态的组件上添加
transition-colors 类。theme.defaultVariants 新
使用 theme.defaultVariants 选项来覆盖组件的默认 color 和 size 变体。
- 默认值：
{ color: 'primary', size: 'md' }
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
theme: {
defaultVariants: {
color: 'neutral',
size: 'sm'
}
}
})
]
})
inertia
使用 inertia 选项来启用与Inertia.js.
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
inertia: true
})
]
})
的兼容性。使用此选项时，不需要
vue-router，因为 Inertia.js 提供了自己的路由系统。通常使用 RouterLink 的组件将自动使用 Inertia 的 InertiaLink 组件。持续发布
Nuxt UI 使用pkg.pr.new进行持续预览发布，为开发者提供即时访问最新功能和错误修复的能力，无需等待官方发布。
为 v3 分支的所有提交和拉取请求创建自动预览版本。通过将你的包版本替换为特定的提交哈希或拉取请求号来使用它们。
package.json
{
"dependencies": {
- "@nuxt/ui": "^3.0.0",
+ "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@4c96909",
}
}
pkg.pr.new 将自动在 PR 上评论安装 URL，方便测试更改。