Nuxt UI:

使用Nuxt或Vue 3 + Tailwind CSS的团队，用Nuxt UI可快速搭建含125+无障碍组件的生产级应用，底层基于Reka UI与Tailwind Variants，支持Nuxt与纯Vue项目（Vite、Inertia、SSR）。

核心能力与架构

Nuxt UI v4.10.0统一了原Nuxt UI与Nuxt UI Pro，全部开源免费。组件基于Reka UI实现WAI-ARIA合规、键盘导航与焦点管理；样式层依赖Tailwind CSS与Tailwind Variants，支持slot、variant、compound variant及智能class合并。内置7个语义色别名（primary、secondary、success、info、warning、error、neutral），通过CSS变量与AppConfig运行时配置实现多租户动态主题。

• 125+组件: 涵盖Layout、Form、Data、Navigation、Overlay、AI Chat、Editor等类别，含Dashboard、Pricing、BlogPost等复合组件
• 设计Token: 提供--ui-radius、--ui-container、--ui-header-height等全局CSS变量，以及bg-default、text-primary等语义化工具类
• 集成模块: 自动注册@nuxt/icon（20万+图标）、@nuxt/fonts、@nuxtjs/color-mode，无需手动添加
• 模板快速启动: 官方提供Starter、Landing、Docs、SaaS、Dashboard、Chat、Portfolio、Changelog、Editor共9个模板，通过npm create nuxt@latest -- -t ui/xxx使用

安装与使用方式

Nuxt项目安装@nuxt/ui后，在nuxt.config.ts中注册模块，CSS中@import tailwindcss和@import @nuxt/ui即可。Vue项目（含Laravel Inertia、AdonisJS Inertia）需在vite.config.ts中添加@nuxt/ui/vite插件，并配置router参数为inertia。TypeScript用户需在tsconfig中include auto-imports.d.ts与components.d.ts。

• App组件包裹: 根组件需使用<UApp>包裹，否则Toast、Tooltip及程序化Overlay无法工作
• Vue版别名: 内部依赖自定义别名解析主题类型，需在tsconfig中配置alias以启用自动补全
• Nuxt Layers: 自动为各layer目录生成@source指令，确保Tailwind扫描所有层源文件
• VSCode扩展: 推荐安装Tailwind CSS IntelliSense，并配置files.associations、tailwindCSS.classAttributes等设置

组件特色与生态

v4新增AI Chat系列组件（ChatMessage、ChatPalette、ChatPrompt、ChatReasoning等）和Editor组件（含DragHandle、EmojiMenu、MentionMenu、SuggestionMenu、Toolbar）。Dashboard系列提供DashboardPanel、DashboardResizeHandle、DashboardSearchButton等专业布局。Content系列与@nuxt/content深度集成，提供ContentNavigation、ContentSearch、ContentToc。

• Figma套件: 提供完整Figma Kit，与组件库设计Token同步
• MCP Server与LLMs.txt: 提供Agents、MCP Server、Skills等AI集成能力，用于LLM驱动的开发辅助
• 社区数据: 1.8M+月下载量、6.8K+ GitHub星标、300+贡献者
• 迁移支持: 官网提供v2v3及v3v4迁移指南，v4迁移更平滑

常见问题

Q1：Nuxt UI v4是否必须搭配Nuxt使用？

A1：不必须。Nuxt UI同时支持Nuxt应用和纯Vue应用（Vite、Inertia、SSR）。纯Vue项目需通过@nuxt/ui/vite插件引入，并配置router参数（如inertia）。

Q2：Nuxt UI的国际化支持哪些语言？

A2：组件内置50+语言翻译，支持LTR/RTL双向布局，可与i18n模块配合使用，官网提供LocaleSelect组件示例。

Q3：如何自定义Nuxt UI组件的样式？

A3：提供三层定制：1）全局在app.config.ts中通过slots、variants、defaultVariants覆盖；2）单个组件使用ui prop进行slot级样式覆盖；3）根元素使用class prop直接覆盖。同时支持CSS变量（如--ui-primary）和@theme指令定义字体、颜色、断点。

更多同类工具与网站,可在Vue分类继续挑选。

信息核实于 2026年7月,具体以官网为准。