名称: nuxt-ui 描述: 在构建风格化UI时使用@nuxt/ui v4组件（如按钮、模态框、表单、表格等）——提供即用型组件，支持Tailwind Variants主题定制。使用vue技能处理原始组件模式，使用reka-ui处理无头基元。 许可证: MIT
Nuxt UI v4
基于Reka UI（无头）+ Tailwind CSS v4 + Tailwind Variants构建的Vue 3和Nuxt 4+组件库。
当前稳定版本: v4.4.0（2026年1月）
使用场景
- 安装/配置@nuxt/ui
- 使用UI组件（按钮、卡片、表格、表单等）
- 自定义主题（颜色、变体、CSS变量）
- 构建带验证的表单
- 使用叠加层（模态框、通知、命令面板）
- 使用组合式函数（useToast、useOverlay）
对于Vue组件模式: 使用vue技能
对于Nuxt路由/服务器: 使用nuxt技能
可用指导
| 文件 | 主题 |
|---|---|
| references/installation.md | Nuxt/Vue设置、pnpm陷阱、UApp包装器、模块选项、前缀、树摇优化 |
| references/theming.md | 语义颜色、CSS变量、app.config.ts、Tailwind Variants |
| references/components.md | 按类别索引的组件（125+个组件） |
| components/*.md | 每个组件的详细信息（button.md、modal.md等） |
| references/forms.md | 表单组件、验证（Zod/Valibot）、useFormField |
| references/overlays.md | 通知、模态框、侧滑抽屉、抽屉、命令面板 |
| references/composables.md | useToast、useOverlay、defineShortcuts、useScrollspy |
加载文件
根据您的任务考虑加载这些参考文件:
- [ ] references/installation.md - 如果安装或配置@nuxt/ui
- [ ] references/theming.md - 如果自定义主题、颜色或Tailwind Variants
- [ ] references/components.md - 如果浏览组件索引或按类别查找组件
- [ ] references/forms.md - 如果构建带验证的表单（Zod/Valibot）
- [ ] references/overlays.md - 如果使用通知、模态框、侧滑抽屉、抽屉或命令面板
- [ ] references/composables.md - 如果使用useToast、useOverlay或其他组合式函数
不要一次性加载所有文件。 只加载与您当前任务相关的文件。
关键概念
| 概念 | 描述 |
|---|---|
| UApp | 通知、工具提示、叠加层所需的包装器组件 |
| Tailwind Variants | 类型安全的样式，支持插槽、变体、复合变体 |
| 语义颜色 | 主要、次要、成功、错误、警告、信息、中性 |
| Reka UI | 无头组件基元（内置可访问性） |
对于无头组件基元（API详情、可访问性模式、asChild）：阅读reka-ui技能
快速参考
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css']
})
/* assets/css/main.css */
@import 'tailwindcss';
@import '@nuxt/ui';
<!-- app.vue - UApp包装器必需 -->
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
资源
令牌效率：主技能约300个令牌，每个子文件约800-1200个令牌