发布· 2025年3月12日

Nuxt UI v3

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

Benjamin Canac

@benjamincanac

Sébastien Chopin

@atinux

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 个语义化颜色别名：

颜色	默认	描述
`primary`	`blue`	代表品牌的主色。
`secondary`	`blue`	补充主色的辅色。
`success`	`green`	用于成功状态。
`info`	`blue`	用于信息状态。
`warning`	`yellow`	用于警告状态。
`error`	`red`	用于表单错误验证状态。
`neutral`	`slate`	用于背景、文本等的中性色。

这种方法使您的代码库更易于维护，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 挑战提供了解决方案：

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

• 导航：直观引导用户的菜单、标签页和面包屑

• 反馈：清晰传达信息的提示、警报和模态框

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

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

每个组件都设计得既开箱即用，又能在需要时进行深度定制。

🔷 改进的 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

yarn add @nuxt/ui@latest

npm install @nuxt/ui@latest

bun add @nuxt/ui@latest

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

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

🙏 致谢

此版本的发布代表了我们团队和社区数千小时的工作。我们想感谢每一位为实现 Nuxt UI v3 做出贡献的人。

我们期待看到您使用 Nuxt UI v3 构建的精彩作品！

← 返回博客