# Nuxt UI Vue 组件库构建于 [Reka UI]() \+ [Tailwind CSS]() \+ [Tailwind Variants]()。可与 Nuxt、Vue (Vite)、Laravel (Inertia) 和 AdonisJS (Inertia) 配合使用。 ## 安装 ### 努克斯特 pnpm 添加@nuxt/ui tailwindcss // nuxt.config.ts 导出默认的defineNuxtConfig({ 模块：['@nuxt/ui']， css: ['~/assets/css/main.css'] }) /* 应用程序/资产/css/main.css */ @导入“tailwindcss”； @import“@nuxt/ui”； <模板> ### Vue（Vite） pnpm 添加@nuxt/ui tailwindcss // vite.config.ts 从“vite”导入{defineConfig} 从 '@vitejs/plugin-vue' 导入 vue 从 '@nuxt/ui/vite' 导入 ui 导出默认的defineConfig({ 插件：[ vue(), 用户界面（） ] }) // src/main.ts 导入'./assets/main.css' 从 'vue' 导入 { createApp } 从 'vue-router' 导入 { createRouter, createWebHistory } 从 '@nuxt/ui/vue-plugin' 导入 ui 从“./App.vue”导入应用程序常量应用程序 = createApp(应用程序) 常量路由器 = createRouter({ 路线：[]，历史记录：createWebHistory() }) 应用程序使用（路由器）应用程序.use(ui) app.mount('#app') /* 资产/main.css */ @导入“tailwindcss”； @import“@nuxt/ui”； <模板> <路由器视图/> > **Vue** ：将 `class="isolate"` 添加到 `index.html` 中的根 `

` 中。 > **Vue + Inertia** : 在 `vite.config.ts` 中使用 `ui({ router: 'inertia' })`。 ### U应用程序 **需要**将您的应用程序包装在“UApp”中——它为 toast、工具提示和编程叠加提供全局配置。它还接受 i18n 的 `locale` 属性（请参阅 [composables 参考]()）。 ## 图标 Nuxt UI 使用 [Iconify]() 来处理 200,000 多个图标。在 Nuxt 中，`@nuxt/icon` 是自动注册的。在 Vue 中，图标通过 Vite 插件开箱即用。 ### 命名约定图标使用格式“i-{collection}-{name}”： > 浏览 [icones.js.org]() 上的所有图标。 `lucide` 集合在 Nuxt UI 默认值中使用。 ### 在本地安装图标集合 pnpm 我@iconify-json/lucide pnpm 我@iconify-json/simple-icons ### 自定义本地集合（Nuxt） // nuxt.config.ts 导出默认的defineNuxtConfig({ 图标：{ 自定义集合：[{ 前缀：'自定义'，目录：'./app/assets/icons' }] } }) ## 主题和品牌 Nuxt UI 附带默认外观。目标是使其适应您的品牌，使每个应用程序看起来都是独一无二的。 **始终使用语义实用程序**（“text-default”、“bg-elevated”、“border-muted”），切勿使用原始 Tailwind 调色板颜色。有关完整列表，请参阅 [references/theming.md]()。＃＃＃颜色 7 种语义颜色（“primary”、“secondary”、“success”、“info”、“warning”、“error”、“neutral”）可在运行时配置： // Nuxt — app.config.ts 导出默认的defineAppConfig({ ui: { 颜色: { 原色: '靛蓝', 中性: '锌' } } }) // Vue — vite.config.ts 从“vite”导入{defineConfig} 从 '@vitejs/plugin-vue' 导入 vue 从 '@nuxt/ui/vite' 导入 ui 导出默认的defineConfig({ 插件：[ vue(), 用户界面（{ ui: { 颜色: { 原色: '靛蓝', 中性: '锌' } } }) ] }) ### 自定义组件 **覆盖优先级**（最高获胜）：`ui` prop / `class` prop > 全局配置 > 主题默认值。在计算变体后，`ui` 属性会覆盖组件的 **slots** — 它战胜了一切： **读取生成的主题文件**以查找任何组件的插槽名称： * **Nuxt** : `.nuxt/ui/<组件>.ts` * **Vue** : `node_modules/.nuxt-ui/ui/<组件>.ts` > 有关 CSS 变量、自定义颜色、全局配置、复合变体和 **完整品牌定制手册**，请参阅 [references/theming.md]() ## 可组合项 // 通知 const toast = useToast() toast.add({ title: '已保存', color: '成功', icon: 'i-lucide-check' }) // 程序化叠加常量覆盖 = useOverlay() const modal = override.create(MyModal) const { 结果 } = modal.open({ title: '确认' }) 等待结果 // 键盘快捷键定义快捷方式({ meta_k: () => openSearch(), 转义：() => 关闭() }) > 有关完整的可组合参考，请参阅 [references/composables.md]() ## 表单验证使用标准架构 — 可与 Zod、Valibot、Yup 或 Joi 配合使用。 <脚本设置lang =“ts”> 从 'zod' 导入 { z } const 架构 = z.object({ email: z.string().email('无效的电子邮件'), 密码: z.string().min(8, '最少 8 个字符') }) 类型架构 = z.output<架构类型> const state = Reactor>({ 电子邮件: '', 密码: '' }) 函数 onSubmit() { // UForm 在发出 @submit 之前进行验证 — 此处状态有效 } <模板> 登录 > 对于所有表单组件和验证模式，请参阅 [references/components.md]() ## 叠加 <模板#body>内容 <模板#footer> 取消保存 <模板#body>内容 > 对于所有覆盖组件，请参阅 [references/components.md]() ## 布局 Nuxt UI 提供了组成完整页面布局的组件。加载与您的用例匹配的参考：布局|描述 |参考 ---|---|--- 页 |登陆、博客、变更日志、定价 - 面向公众的页面 | [layouts/page.md]() 仪表板|具有可调整大小的侧边栏和面板的管理 UI [layouts/dashboard.md]() 文档 |带有侧边栏导航和目录的文档 | [layouts/docs.md]() 聊天 | AI聊天带消息和提示| [layouts/chat.md]() 编辑|带工具栏的富文本编辑器 | [layouts/editor.md]() ## 模板官方入门模板位于 [github.com/nuxt-ui-templates]()：模板|框架| GitHub ---|---|--- 入门 |努克斯特 | [nuxt-ui-templates/starter]() 入门 |视图 | [nuxt-ui-templates/starter-vue]() 仪表板|努克斯特 | [nuxt-ui-templates/dashboard]() 仪表板|视图 | [nuxt-ui-templates/dashboard-vue]() SaaS |努克斯特 | [nuxt-ui-templates/saas]() 登陆|努克斯特 | [nuxt-ui-templates/landing]() 文档 |努克斯特 | [nuxt-ui-templates/docs]() 投资组合 |努克斯特 | [nuxt-ui-templates/portfolio]() 聊天 |努克斯特 | [nuxt-ui-templates/chat]() 编辑|努克斯特 | [nuxt-ui-templates/editor]() 更新日志 |努克斯特 | [nuxt-ui-templates/changelog]() 入门 |拉维尔 | [nuxt-ui-templates/starter-laravel]() 入门 | AdonisJS | [nuxt-ui-templates/starter-adonis]() > 开始新项目时，克隆匹配的模板，而不是从头开始设置。 ## 其他参考资料根据您的任务加载 - **不要一次加载全部**： * [references/theming.md]() — CSS 变量、自定义颜色、组件主题覆盖 * [references/components.md]() — 按类别划分的所有 125 个以上组件以及道具和用法 * [references/composables.md]() — useToast、useOverlay、defineShortcuts * 生成的主题文件 - 任何组件的所有插槽、变体和默认类（Nuxt：`.nuxt/ui/<组件>.ts`，Vue：`node_modules/.nuxt-ui/ui/<组件>.ts`）

努克斯特用户界面

包含技能