介绍

Reka UI

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

• 庞大的组件库：Reka UI 拥有 55+ 个基本组件（Primitives），极大地扩展了我们的组件产品。
• 活跃的开发：Reka UI 日益增长的普及度确保了持续的改进和更新。
• 增强的可访问性：内置的可访问性功能与我们对包容性设计的承诺相符。
• Vue 3 优化：与 Vue 3 和 Composition API 的无缝集成。

这一转变使得 Nuxt UI 成为一个更全面、更灵活的 UI 库，为开发者提供了更强大的功能和自定义选项。

Tailwind CSS v4

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

• 为性能而生：新引擎中的完全构建速度提高了 5 倍，而增量构建速度提高了 100 倍以上——并且以微秒为单位衡量。
• 统一的工具链：内置导入处理、供应商前缀和语法转换，无需额外的工具。
• CSS 优先配置：重新设计的开发者体验，你可以直接在 CSS 中而不是 JavaScript 配置文件中定制和扩展框架。
• 专为现代 Web 设计：基于原生的级联层（cascade layers）、广色域颜色（wide-gamut colors），并包括对现代 CSS 特性（如容器查询、@starting-style、popovers 等）的一流支持。

Tailwind Variants

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

• 动态样式：通过强大的 API 实现灵活的组件变体
• 类型安全：完整的 TypeScript 支持及自动补全
• 冲突解决：高效合并冲突样式

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

TypeScript 集成

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

• 增强的自动补全:
  • 基于你的主题为组件属性提供完整的自动补全
  • 为 app.config.ts 主题配置提供智能建议
• 基于泛型（Generic）的组件:
  • 使用Vue 3 Generics
  • 改进的插槽（slots）和事件（events）类型推断
• 类型安全的主题化:
  • 利用 Tailwind Variants 实现类型安全的样式选项
  • 可自定义的类型，用于扩展主题配置

Vue 兼容性

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

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

Nuxt DevTools 集成

你可以使用compodium模块直接在 Nuxt Devtools 中操作 Nuxt UI 组件以及你的应用组件，这提供了强大的开发体验：

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

npx nuxi module add compodium

迁移

我们想明确说明：从 Nuxt UI v2 迁移到 v3 需要付出相当大的努力。虽然我们保留了核心概念和组件，但 Nuxt UI v3 已从头开始重建，成为一个具有增强能力的新库。

需要考虑的关键点：

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

常见问题解答

我们对 Nuxt UI v3 为你的项目带来的可能性感到兴奋。请查阅我们的文档，了解新功能、组件以及构建强大、易访问的用户界面的最佳实践。