安装
了解如何在 Vue 应用中安装和配置 Nuxt UI。
安装配置
添加到 Vue 项目
安装 Nuxt UI 包
pnpm add @nuxt/ui
yarn add @nuxt/ui
npm install @nuxt/ui
bun add @nuxt/ui
如果你正在使用 pnpm，请确保你设置了
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
在你的 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')
建议安装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>
<RouterView />
</UApp>
</template>
使用我们的 Vue 启动模板
使用nuxtlabs/nuxt-ui-vue-starter模板启动你的项目，该模板已预先配置了 Nuxt UI。
通过运行以下命令在本地创建一个新项目
终端
npx nuxi init -t github:nuxtlabs/nuxt-ui-vue-starter <my-app>
参数
<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
}
})
]
})
这个选项会在具有 hover 或 active 状态的组件上添加
transition-colors 类。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 分支的所有提交和 PR 都会创建自动预览发布。通过将你的包版本替换为特定的提交哈希或 PR 编号来使用它们。
package.json
{
"dependencies": {
- "@nuxt/ui": "^3.0.0",
+ "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@4c96909",
}
}
pkg.pr.new 会自动在 PR 上评论安装 URL，以便轻松测试更改。