用途:Nuxt UI 是构建 Vue 界面的组件库,基于 Reka UI、Tailwind CSS 和 Tailwind Variants,提供 125+ 可访问组件,适用于 Nuxt、Vue(Vite)、Laravel(Inertia)和 AdonisJS(Inertia)。
主要能力:内置语义化颜色(primary、secondary、success、info、warning、error、neutral)与主题定制;通过 Iconify 支持 20 万+ 图标,命名格式为 i-{collection}-{name};提供 UApp 全局容器、表单校验(基于 Standard Schema,兼容 Zod、Valibot、Yup、Joi)、弹窗与侧滑等覆盖层组件,以及 useToast、useOverlay、defineShortcuts 等组合式函数。
使用方式:Nuxt 中安装 pnpm add @nuxt/ui tailwindcss,在 nuxt.config.ts 注册模块并引入 CSS,用 UApp 包裹应用。Vue(Vite)中安装同样依赖,在 vite.config.ts 使用 ui() 插件,main.ts 注册 vue-plugin,并在 index.html 根 div 加 class="isolate"。Vue + Inertia 使用 ui({ router: 'inertia' })。主题可在 app.config.ts 或 vite.config.ts 中配置颜色。组件覆盖优先级为 ui/class 属性 > 全局配置 > 主题默认值。
适用场景:落地页、博客、仪表盘、文档、聊天、编辑器等界面,官方提供对应模板,建议新项目直接克隆模板。
限制:必须用 UApp 包裹应用以支持 toast、tooltip 和程序化覆盖层;主题定制应使用语义化工具类而非原始 Tailwind 调色板颜色;图标集合可本地安装。具体收费、价格与平台支持等资料暂未提供。