用途:Nuxt UI 是构建界面的 Vue 组件库,基于 Reka UI、Tailwind CSS 和 Tailwind Variants,提供 125+ 无障碍组件,适用于 Nuxt、Vue(Vite)、Laravel(Vite + Inertia)和 AdonisJS(Vite + Inertia)。
主要能力:提供组件、组合式函数与图标检索;支持语义化颜色与主题定制;可通过 ui prop、class prop、全局配置和主题默认值调整样式,优先级为 ui/class → 全局配置 → 主题默认。图标采用 i-{collection}-{name} 格式,默认 lucide。
使用方式:Nuxt 安装 pnpm add @nuxt/ui tailwindcss,在 nuxt.config.ts 注册模块并引入 CSS,用 UApp 包裹应用。Vue(Vite)安装同样命令,在 vite.config.ts 使用 @nuxt/ui/vite,在 main.ts 使用 @nuxt/ui/vue-plugin,并在 index.html 根 div 加 class="isolate";Inertia 使用 ui({ router: 'inertia' })。组件 API 细节可通过 Nuxt UI MCP 服务器查询,例如 Claude Code 执行 claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp,工具包括 search-components、search-composables、search-icons、get-component、get-component-metadata、get-example。
适用场景:落地页、仪表盘、文档站、聊天界面、富文本编辑器、数据表格、认证表单、覆盖层与导航等。
限制:必须用 UApp 包裹应用以支持 toast、tooltip 和程序化覆盖层;应使用语义化颜色而非原始 Tailwind 调色板颜色;主题槽位名可查看生成文件(Nuxt 为 .nuxt/ui/<component>.ts,Vue 为 node_modules/.nuxt-ui/ui/<component>.ts)。其他收费、平台或效果信息暂未提供。