介绍

什么是Nuxt UI？

基于Reka UI、Tailwind CSS和Tailwind Variants构建的现代化Vue UI组件库，可提供125个以上生产就绪组件的美观且可访问的应用程序。适用于Nuxt和普通Vue应用程序（Vite、Inertia、SSR）。

如果您正在使用Tailwind CSS构建Vue项目，Nuxt UI是一个很好的默认选择。它提供了高级，即用型组件（数据表，表单，覆盖，导航），同时还允许在需要时进行高级自定义。

v4有什么新功能？

Nuxt UI v4标志着一个重要的里程碑：Nuxt UI和Nuxt UI Pro现在统一为一个单一的、完全开源的免费库，其中包含125多个生产就绪的组件和一个完整的Figma Kit。

从v3到v4的迁移将比从v2到v3更顺利。请参阅迁移指南了解更多信息。

核心技术

Nuxt UI建立在三个基础上：Reka UI用于行为和可访问性，Tailwind CSS用于样式化，Tailwind Variants用于组合变体。

Reka UI

Nuxt UI构建在Reka UI之上，作为组件的基础：

• WAI-ARIA合规性：遵循WAI-ARIA创作实践，并具有适当的语义和角色
• 键盘导航：内置键盘支持复杂组件，如选项卡和对话框
• 焦点管理：智能焦点处理，根据用户交互移动焦点
• sible Labels：用于简化屏幕阅读器标签控件的抽象

Tailwind CSS

Nuxt UI集成了最新的Tailwind CSS，带来了显著的改进：

• 5 x更快的构建速度：完整构建速度最高可达5倍，增量构建速度超过100倍
• 统一工具链：内置导入处理、供应商前缀和语法转换
• CSS优先：直接在CSS中而不是JavaScript中自定义和扩展
• 现代Web浏览器：容器查询、层叠层、宽色域色彩等

Tailwind变体

Nuxt UI利用Tailwind Variants提供强大的设计系统：

• 动态样式：具有强大API的灵活组件变体
• Type Safety：完整的TypeScript支持和自动完成
• 冲突解决：高效合并冲突样式

主要特点

生态系统集成

Nuxt UI兼容SSR，并与生态系统无缝集成：

Vue兼容性（Nuxt可选）

Nuxt UI适用于任何Vue项目，而不仅仅是Nuxt。只需将Vite和Vue插件添加到您的配置中：

• Auto-imports：组件和可组合组件自动导入并全局可用
• 设计系统：全面的主题支持，可定制颜色、大小、变体等
• 开发人员体验e：完整的TypeScript支持，具有智能感知和自动完成功能

TypeScript支持

Nuxt UI提供全面的TypeScript集成，以获得上级开发人员体验：

• 自动完成：用于所有组件道具、插槽和事件
• 泛型：使用Vue泛型
• 类型安全主题：在app.config.ts中
• IntelliSense：在整个代码库中

模板

Nuxt UI为Nuxt和Vue提供了生产就绪的模板，以帮助您快速入门：

• Nuxt模板：Starter，Landing，Docs，SaaS，Dashboard，Chat，Portfolio，Changelog、Editor和Calendar
• Vue模板：Starter、Dashboard和Chat

常见问题