用途:Nuxt UI 是建立在 Reka UI、Tailwind CSS 和 Tailwind Variants 之上的 Vue 组件库,提供 125+ 可访问组件,用于构建界面并按品牌定制主题。支持 Nuxt、Vue(Vite)、Laravel(Inertia)和 AdonisJS(Inertia)。
主要能力:内置图标(基于 Iconify,20 万+ 图标,命名格式 i-{collection}-{name});7 种语义颜色(primary、secondary、success、info、warning、error、neutral)可运行时配置;提供 UApp 全局容器为 toast、tooltip 和程序化浮层提供配置;组合式函数包括 useToast、useOverlay、defineShortcuts;UForm 基于 Standard Schema,兼容 Zod、Valibot、Yup、Joi;提供 UModal、USlideover、UDropdownMenu 等浮层组件及页面、仪表盘、文档、聊天、编辑器等布局组件。
使用方式:Nuxt 项目执行 pnpm add @nuxt/ui tailwindcss,在 nuxt.config.ts 的 modules 中加入 '@nuxt/ui',并在 CSS 中 @import "tailwindcss" 与 @import "@nuxt/ui",用 UApp 包裹应用。Vue(Vite)项目同样安装依赖,在 vite.config.ts 使用 @nuxt/ui/vite 插件,main.ts 中 app.use(ui)。Vue 需在 index.html 的根 div#app 加 class="isolate";Vue + Inertia 在 vite.config.ts 使用 ui({ router: 'inertia' })。组件样式覆盖优先级为 ui/class 属性 > 全局配置 > 主题默认;可读取生成的主题文件查看插槽名(Nuxt: .nuxt/ui/<component>.ts;Vue: node_modules/.nuxt-ui/ui/<component>.ts)。建议新项目直接克隆官方模板而非从零搭建。
适用场景:Nuxt、Vue 及 Inertia(Laravel、AdonisJS)项目的界面搭建、品牌主题定制、表单验证与浮层交互。
限制:资料未提供具体收费、价格、性能或兼容版本细节,暂未提供。