发布·  

Nuxt UI v3

Nuxt UI v3 发布了！经过 1500 多次提交，这次重大重新设计带来了改进的可访问性、对 Tailwind CSS v4 的支持以及完整的 Vue 兼容性。
Benjamin Canac

Benjamin Canac

@benjamincanac

Sébastien Chopin

Sébastien Chopin

@atinux

Hugo Richard

Hugo Richard

@hugorcd__

我们很高兴宣布 Nuxt UI v3 的发布，这是我们 UI 库的全面重新设计，在可访问性、性能和开发者体验方面带来了显著改进。这次重大更新代表了我们团队和社区超过 1500 次提交的辛勤工作、协作和创新。

🚀 彻底重构

Nuxt UI v3 代表着我们在为 Vue 和 Nuxt 开发者提供最全面的 UI 解决方案的旅程中迈出的重要一步。此版本已采用现代技术和最佳实践从头开始重建。

从 HeadlessUI 到 Reka UI

Reka UI 作为其核心，Nuxt UI v3 提供：

• 所有交互式组件的正确键盘导航

• 自动处理 ARIA 属性

• 焦点管理开箱即用

• 屏幕阅读器友好的组件开箱即用

这意味着您可以构建适用于所有人的应用程序，而无需成为可访问性专家。

Tailwind CSS v4 集成

与 Tailwind CSS v4 的集成带来了巨大的性能改进：

• 运行时快 5 倍，组件渲染优化

• 构建时间快 100 倍，得益于新的 CSS-first 引擎

• 更小的包大小，更高效的样式

您的应用程序将感觉更灵敏，构建更快，并为您的用户加载更快。

🎨 全新的设计系统

<!-- Before: Inconsistent color usage with duplicate dark mode classes -->
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg">
  <h2 class="text-gray-900 dark:text-white text-xl mb-2">User Profile</h2>
  <p class="text-gray-600 dark:text-gray-300">Account settings and preferences</p>
  <button class="bg-blue-500 text-white px-3 py-1 rounded mt-2">Edit Profile</button>
</div>

<!-- After: Semantic design tokens with automatic dark mode support -->
<div class="bg-muted p-4 rounded-lg">
  <h2 class="text-highlighted text-xl mb-2">User Profile</h2>
  <p class="text-muted">Account settings and preferences</p>
  <UButton color="primary" size="sm" class="mt-2">Edit Profile</UButton>
</div>

我们新的颜色系统包括 7 个语义颜色别名：

颜色默认描述
primaryblue表示品牌的原色。
secondaryblue补充原色的次要颜色。
successgreen用于成功状态。
infoblue用于信息状态。
warningyellow用于警告状态。
errorred用于表单错误验证状态。
neutralslate用于背景、文本等的中性颜色。

这种方法使您的代码库更易维护，UI 更一致——尤其是在团队协作时。有了这些语义令牌，亮暗模式切换变得轻松，系统会自动处理每个主题的适当颜色值，而无需重复类定义。

💚 完整的 Vue 兼容性

我们很高兴将 Nuxt UI 的范围扩展到 Nuxt 框架之外。通过 v3，Nuxt UI 和 Nuxt UI Pro 现在都可以在任何 Vue 项目中无缝运行，这意味着您可以：

• 在所有 Vue 项目中使用相同的组件

• 在任何 Vue 应用程序中受益于 Nuxt UI 的主题系统

• 在 Nuxt 之外享受自动导入和 TypeScript 支持

• 在任何 Vue 项目中利用基本组件和高级 Pro 组件

vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui()
  ]
})

📦 满足各种需求的组件

Nuxt UI v3 拥有 54 个核心组件、50 个 Pro 组件和 42 个 Prose 组件，为几乎所有 UI 挑战提供了解决方案：

• 数据展示：表格、图表和可视化，可适应您的数据

• 导航：菜单、选项卡和面包屑，直观地引导用户

• 反馈：Toast、警报和模态框，清晰地传达信息

• 表单：输入、选择器和验证，简化数据收集

• 布局：网格、容器和响应式系统，精美地组织内容

每个组件都被设计成开箱即用的美观，并在需要时可深度定制。

🔷 改进的 TypeScript 集成

我们彻底改进了 TypeScript 集成，其功能让您更高效：

  • 具有有用自动补全的完整类型安全
  • 基于泛型的组件，实现灵活的 API
  • 通过清晰一致的 API 实现类型安全的主题化
export default defineAppConfig({
  ui: {
    button: {
      // Your IDE will show all available options
      slots: {
        base: 'font-bold rounded-lg'
      },
      defaultVariants: {
        size: 'md',
        color: 'error'
      }
    }
  }
})

⬆️ 升级到 v3

我们准备了一份全面的迁移指南，帮助您从 v2 升级到 v3。虽然由于我们彻底的改造，存在破坏性更改，但我们努力使过渡尽可能顺利。

🎯 开始使用

无论您是开始一个新项目还是升级现有项目，使用 Nuxt UI v3 都很容易：

# Create a new Nuxt project with Nuxt UI
npx nuxi@latest init my-app -t ui

pnpm add @nuxt/ui@latest
如果您使用 pnpm，请确保在您的 .npmrc 文件中设置shamefully-hoist=true或在您的项目根目录中安装 tailwindcss。

请访问我们的文档以探索 Nuxt UI v3 中所有可用的组件和功能。

🙏 感谢

本次发布代表了我们团队和社区数千小时的工作。我们要感谢所有为使 Nuxt UI v3 成为现实做出贡献的人。

我们很高兴看到您将用 Nuxt UI v3 构建什么！

← 返回博客
Nuxt 在领英上Nuxt on BlueskyNuxt 在 X 上