简介

Reka UI

我们已从 Headless UI 迁移到 Reka UI 作为我们的核心组件基础。这一转变带来了几个关键优势：

• 广泛的组件库：Reka UI 拥有 55+ 个原生组件，显著扩展了我们的组件产品。
• 积极开发：Reka UI 日益普及，确保了持续改进和更新。
• 增强的可访问性：内置可访问性功能与我们对包容性设计的承诺相符。
• Vue 3 优化：与 Vue 3 和组合式 API 无缝集成。

此次迁移使 Nuxt UI 成为一个更全面、更灵活的 UI 库，为开发者提供更大的能力和定制选项。

Tailwind CSS v4

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

• 为性能而生：新引擎中的完整构建速度最高可提高 5 倍，增量构建速度可提高 100 倍以上，且以微秒为单位。
• 统一工具链：内置导入处理、供应商前缀和语法转换，无需额外工具。
• CSS 优先配置：重新构想的开发者体验，您直接在 CSS 中而不是 JavaScript 配置文件中定制和扩展框架。
• 为现代网络而设计：基于原生级联层、广色域颜色构建，并包括对容器查询、@starting-style、弹出窗口等现代 CSS 功能的一流支持。
• 了解 Tailwind CSS v4 中的所有重大更改。

Tailwind Variants

我们已采用 Tailwind Variants 来管理我们的设计系统，提供：

• 动态样式：具有强大 API 的灵活组件变体
• 类型安全：全面的 TypeScript 支持和自动补全
• 冲突解决：高效合并冲突样式

这种集成统一了组件的样式，确保了一致性和代码可维护性。

TypeScript 集成

Nuxt UI 提供了显著改进的 TypeScript 集成，提供了卓越的开发者体验：

• 增强的自动补全：
  • 基于您的主题对组件属性进行完全自动补全
  • 对 app.config.ts 主题配置的智能建议
• 基于泛型的组件：
  • 使用 Vue 3 泛型 构建
  • 改进了插槽和事件的类型推断
• 类型安全主题：
  • 利用 Tailwind Variants 实现类型安全的样式选项
  • 可自定义扩展主题配置的类型

Vue 兼容性

您现在可以在任何 Vue 项目中使用 Nuxt UI，而无需 Nuxt，只需将 Vite 和 Vue 插件添加到您的配置中。这提供了：

• 自动导入：组件和可组合项会自动导入并在全局可用
• 主题系统：完整的可自定义颜色、大小、变体等主题支持
• 开发者体验：全面的 TypeScript 支持，包括 IntelliSense 和自动补全

Nuxt DevTools 集成

您可以使用 compodium 模块直接从 Nuxt Devtools 中使用 Nuxt UI 组件以及您的应用程序组件，从而提供强大的开发体验：

• 组件检查器：实时检查和分析 Nuxt UI 组件
• 实时预览：修改组件属性并即时查看更改
• 代码生成：获取组件配置的相应代码

npx nuxt module add compodium

迁移

我们希望透明地说明：从 Nuxt UI v2 迁移到 v3 将需要付出巨大的努力。虽然我们保留了核心概念和组件，但 Nuxt UI v3 已从头开始重建，从而形成了一个功能增强的新库。

需要考虑的关键点：

• 阅读我们的 迁移指南 以将您的项目从 v2 升级到 v3。
• 在尝试升级之前，请仔细审查新文档和组件。
• 如果您遇到任何问题，请在我们的 GitHub 存储库 上报告。

FAQ

我们对 Nuxt UI v3 为您的项目带来的可能性感到兴奋。探索我们的文档以了解有关新功能、组件和构建强大、可访问的用户界面的最佳实践。