---
title: "Nuxt UI v3"
description: "Nuxt UI v3 已发布！经过 1500+ 次提交，这次重大重新设计带来了 更好的可访问性、Tailwind CSS v4 支持以及完整的 Vue 兼容性"
canonical_url: "https://nuxt.zhcndoc.com/blog/nuxt-ui-v3"
---
# Nuxt UI v3

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

我们很高兴地宣布 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 优先引擎

• 更高效的样式使得包体积更小

您的应用程序将会感觉更加灵敏，构建更快，加载速度更快。

## 🎨 全新的设计系统

```html
<!-- 之前：不一致的颜色使用，存在重复的暗模式类 -->
<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">用户资料</h2>
  <p class="text-gray-600 dark:text-gray-300">账户设置和偏好</p>
  <button class="bg-blue-500 text-white px-3 py-1 rounded mt-2">编辑资料</button>
</div>
```

```html
<!-- 之后：具有自动暗模式支持的语义设计令牌 -->
<div class="bg-muted p-4 rounded-lg">
  <h2 class="text-highlighted text-xl mb-2">用户资料</h2>
  <p class="text-muted">账户设置和偏好</p>
  <UButton color="primary" size="sm" class="mt-2">编辑资料</UButton>
</div>
```

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

| 颜色                           | 默认   | 描述               |
| ---------------------------- | ---- | ---------------- |
| `primary`{.text-primary}     | `绿色` | 主要品牌色，用作组件的默认颜色。 |
| `secondary`{.text-secondary} | `蓝色` | 附属色以补充主要颜色。      |
| `success`{.text-success}     | `绿色` | 用于成功状态。          |
| `info`{.text-info}           | `蓝色` | 用于信息状态。          |
| `warning`{.text-warning}     | `黄色` | 用于警告状态。          |
| `error`{.text-error}         | `红色` | 用于表单错误验证状态。      |
| `neutral`                    | `灰色` | 用于背景、文本等的中性色。    |

这种方法使您的代码库更易于维护，您的 UI 更加一致，特别是在团队合作时。使用这些语义令牌，亮模式和暗模式的过渡变得轻而易举，因为系统会自动处理每个主题的适当颜色值，而无需重复的类定义。

## 💚 完整的 Vue 兼容性

我们很高兴将 Nuxt UI 的范围扩展到 Nuxt 框架之外。随着 v3 的发布，Nuxt UI 和 Nuxt UI Pro 现在可以无缝地在任何 Vue 项目中使用，这意味着您可以：

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

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

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

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

```ts [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 实现类型安全的主题

```ts
export default defineAppConfig({
  ui: {
    button: {
      // 您的 IDE 将显示所有可用选项
      slots: {
        base: 'font-bold rounded-lg'
      },
      defaultVariants: {
        size: 'md',
        color: 'error'
      }
    }
  }
})
```

## ⬆️ 升级到 v3

我们准备了一份全面的 [迁移](https://ui.nuxt.com/getting-started/migration) 指南，帮助您从 v2 升级到 v3。虽然由于我们完全的重构存在一些破坏性更改，但我们努力使迁移过程尽可能顺畅。

## 🎯 入门指南

无论您是在开始一个新项目还是升级现有项目，使用 Nuxt UI v3 的入门都非常简单：

```bash
# 创建一个带有 Nuxt UI 的新 Nuxt 项目
npx nuxi@latest init my-app -t ui
```

::code-group{sync="pm"}
```bash [pnpm]
pnpm add @nuxt/ui@latest
```

```bash [yarn]
yarn add @nuxt/ui@latest
```

```bash [npm]
npm install @nuxt/ui@latest
```

```bash [bun]
bun add @nuxt/ui@latest
```
::

::warning
如果您使用 **pnpm**，请确保在您的 `.npmrc` 文件中设置 [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist)，或者在项目根目录安装 `tailwindcss`。
::

访问我们的 [文档](https://ui.nuxt.com/getting-started) 探索 Nuxt UI v3 中可用的所有组件和功能。

## 🙏 感谢

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

我们期待看到您使用 Nuxt UI v3 构建的东西！


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.