简介

Nuxt UI 结合了 Reka UI、Tailwind CSS 和 Tailwind Variants 的优势，为开发者提供了一套无与伦比的工具，用于创建复杂、可访问且高性能的用户界面。

Reka UI

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

  • 丰富的组件库：Reka UI 拥有 55+ 原语，极大地扩展了我们的组件产品。
  • 积极开发：Reka UI 日益增长的人气确保了持续的改进和更新。
  • 增强的可访问性：内置的可访问性功能与我们对包容性设计的承诺保持一致。
  • Vue 3 优化：与 Vue 3 和 Composition API 无缝集成。

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

Tailwind CSS v4

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

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

Tailwind Variants

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

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

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

TypeScript 集成

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

  • 增强的自动补全:
    • 根据您的主题提供组件属性的完整自动补全
    • 针对 app.config.ts 主题配置的智能建议
  • 基于泛型的组件:
    • 使用Vue 3 泛型
    • 改进了对插槽和事件的类型推断
  • 类型安全的主题化:
    • 利用 Tailwind Variants 提供类型安全的样式选项
    • 可自定义的类型，用于扩展主题配置
查看 Accordion 组件带有属性和插槽自动补全的示例。

Vue 兼容性

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

  • 自动导入：组件和组合式函数会自动导入并全局可用
  • 主题系统：完整的主题支持，可自定义颜色、大小、变体等
  • 开发者体验：全面的 TypeScript 支持，带有 IntelliSense 和自动补全
在Vue 安装指南中了解如何在 Vue 项目中安装和配置 Nuxt UI。

Nuxt DevTools 集成

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

  • 组件检查器：实时检查和分析 Nuxt UI 组件
  • 实时预览：修改组件属性并即时查看更改
  • 代码生成：获取组件配置的相应代码
使用一条命令将模块安装到您的 Nuxt 应用程序
终端
npx nuxt module add compodium

迁移

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

需要考虑的关键点

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

常见问题

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

安装

了解如何在 Nuxt 应用程序中安装和配置 Nuxt UI。