v3.16
GitHub
发布·  

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 优先引擎

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

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

🎨 全新的设计系统

<!-- 之前：不一致的颜色使用，存在重复的暗模式类 -->
<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>

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

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

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

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

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

• 导航：menus、tabs 和 breadcrumbs，直观引导用户

• 反馈：toasts、alerts 和 modals，清晰传达信息

• 表单：inputs、selectors 和数据验证，简化数据收集

• 布局：grids、containers 和响应式系统，优雅地组织内容

每个组件都旨在既美观又在需要时可深度自定义。

🔷 改进的 TypeScript 集成

我们对 TypeScript 集成进行了彻底改革，推出了能提高生产力的功能：

  • 完整的类型安全和丰富的自动完成功能
  • 基于泛型的组件，提供灵活的 API
  • 通过清晰且一致的 API 实现类型安全的主题
export default defineAppConfig({
  ui: {
    button: {
      // 您的 IDE 将显示所有可用选项
      slots: {
        base: 'font-bold rounded-lg'
      },
      defaultVariants: {
        size: 'md',
        color: 'error'
      }
    }
  }
})

⬆️ 升级到 v3

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

🎯 入门指南

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

# 创建一个带有 Nuxt UI 的新 Nuxt 项目
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 on LinkedInNuxt on X