发布版本

及时了解 Nuxt UI 的最新功能、增强和修复。

v4.1.0

✨ 重大更新

📦 新增 Empty 组件

现已提供新的组件,用于在没有内容可显示时展示空状态(#5200).

⚡️ 组件虚拟化

属性来为大型数据集启用虚拟化,适用于CommandPalette, InputMenu, SelectMenu, TableTree组件(#5162).

<template>
  <UTable :data="data" :columns="columns" virtualize />
</template>

🎯 实验性组件检测

文件中启用新的选项,以自动检测实际使用的组件,并且只为这些组件(包括它们的依赖项)生成必要的 CSS(🚨 重大变更#5222).

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    experimental: {
      componentDetection: true
    }
  }
})

我们对这些微小的重大变更表示歉意。在拥有 110 多个组件的库中,我们偶尔需要进行一些修正以保持一致性和质量。我们的目标是尽量减少重大变更,但有时为了长远的开发者体验,它们是必要的。

Table: 在 select 事件中保持参数顺序一致(

<template>
- <UCommandPalette :trailing-icon="i-lucide-arrow-right" />
+ <UCommandPalette :children-icon="i-lucide-arrow-right" />
</template>

🚀 新功能

<template>
- <UTable @select="(row, e) => {}" />
+ <UTable @select="(e, row) => {}" />
</template>

属性(

属性中使用任意 attrs(

locale: 添加克罗地亚语(

@OlegChuev 首次贡献于

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: v3.3.7

我们很高兴地宣布 Nuxt UI v4,这是一个重要的里程碑,它将 Nuxt UI 和 Nuxt UI Pro 合并为一个单一的、完全开源的库。继

NuxtLabs 于 7 月加入 Vercel后,我们现在可以为所有人免费提供 100 多个生产就绪的组件和完整的 Figma 套件。阅读公告博客文章

https://nuxtjs.org.cn/blog/nuxt-ui-v4开始使用 Nuxt UI v4 →

🌐 统一且开源

✨ 重大更新

Nuxt UI v4 标志着一个重要的里程碑,它将 Nuxt UI 和 Nuxt UI Pro 合并为一个统一的、完全开源的库。

100 多个组件:完全访问所有组件,包括以前仅限 Pro 的组件。

🖥 模板

我们所有以前仅限 Nuxt 和 Vue 的模板现已向所有人开放,并已更新为 Nuxt UI v4。

  • Starter:一个最小化的模板,用于开始使用 Nuxt UI。
  • Landing:一个由 Nuxt Content 驱动的现代登陆页面模板。
  • Docs:一个由 Nuxt Content 驱动的文档模板。
  • SaaS:一个包含登陆、定价、文档和博客的 SaaS 模板,由 Nuxt Content 驱动。
  • Dashboard:一个具有多列布局的仪表板模板,用于构建复杂的管理界面。
  • Chat:一个 AI 聊天机器人模板,用于构建您自己的聊天机器人,由 Nuxt MDC 和 Vercel AI SDK 驱动。
  • Portfolio:一个用于展示您的作品、技能和博客的精美作品集模板,由 Nuxt Content 驱动。
  • Changelog:一个用于显示您的 GitHub 仓库发布说明的变更日志模板,由 Nuxt MDC 驱动。

📚 文档

我们在 v4 中对文档进行了大量改进,以提供更好的开发者体验。

  • 统一位置:所有文档现在都位于/docs/下,并从旧路径自动重定向。
  • 专用部分: 主题排版现在拥有自己的组织良好的部分。
  • AI 就绪功能: LLMs.txt端点和MCP 服务器与 Cursor、Windsurf 和 GitHub Copilot 等 AI 工具的集成。

🌱 从 v3 迁移

从 v3 迁移到 v4 的过程比以前的主要版本迁移要平滑。我们建议阅读迁移指南以获取分步说明。

对于 Nuxt UI 用户

  1. 更新至 @nuxt/ui@latest

对于 Nuxt UI Pro 用户

  1. 在您的依赖项中。

🙏 致谢

我们要特别感谢所有支持 Nuxt UI Pro 的人。您的早期采用和反馈对 Nuxt UI 的形成起到了至关重要的作用。您帮助我们资助、维护和改进了项目,使我们能够达到这一里程碑,现在我们可以将这些强大的工具提供给整个社区。

非常感谢Nuxt UI 背后的团队以及我们 250 多名贡献者的精彩社区。你们的辛勤工作、创造力和热情是本项目成功的驱动力。

感谢您参与这段旅程 💚

v3.3.5

属性中使用任意 attrs(

  • InputMenu: 确保在 multiple 时将字符串传递给 items(0031a75#5018
  • InputTags: 在 input 上添加 blur 和 focus 事件处理程序(#5007) (5db2708)
  • #4994) (e0891ea)
  • Tabs: 在 item value 上使用 nullish coalescing(a4ab796#4804
  • types: 允许 tv config 中存在任意键(#4992) (8d859ea)
  • 类型中的 ambient 声明错误(#4991) (526cb81)

新贡献者

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v3.3.4...v3.3.5

v4.0.0-beta.0

属性中使用任意 attrs(

新贡献者

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v4.0.0-alpha.2...v4.0.0-beta.0

v4.0.0-alpha.2

版本发布主要侧重于稳定性和文档。

正式的 v4 版本应该会在下周经过更多测试后发布。

📚 文档

在此版本中,我们对文档进行了重大改进。

我们对这些微小的重大变更表示歉意。在拥有 110 多个组件的库中,我们偶尔需要进行一些修正以保持一致性和质量。我们的目标是尽量减少重大变更,但有时为了长远的开发者体验,它们是必要的。

  • Form: 如果启用了转换,则不应变异表单状态(#4902)

阅读有关此更改的迁移指南https://ui4.nuxt.com/docs/getting-started/migration/v4#changes-to-form-component

属性(

  • ContentNavigation: 处理类型为 multiple 时 collapsible 为 false 的情况(c42c2ab)

属性中使用任意 attrs(

🔥 性能提升

  • module: 不要通过导入插件来阻止 setup(#4923) (695d9f7)

locale: 添加克罗地亚语(

@OlegChuev 首次贡献于

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v4.0.0-alpha.1...v4.0.0-alpha.2

v4.0.0-alpha.1

📚 文档

您可以在 alpha 版本期间查看 v4 的新文档,网址为https://ui4.nuxt.com

我们对这些微小的重大变更表示歉意。在拥有 110 多个组件的库中,我们偶尔需要进行一些修正以保持一致性和质量。我们的目标是尽量减少重大变更,但有时为了长远的开发者体验,它们是必要的。

  • (#4838)
  • module: 更新兼容性至 nuxt 4

阅读v4 迁移指南.

属性(

属性中使用任意 attrs(

新贡献者

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v4.0.0-alpha.0...v4.0.0-alpha.1

v3.3.3

属性(

  • useFormField: 导出表单错误注入键(#4808) (ec2bc0a)

属性中使用任意 attrs(

新贡献者

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v3.3.2...v3.3.3

v3.3.1

属性(

属性中使用任意 attrs(

新贡献者

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v3.3.0...v3.3.1

v3.3.0

✨ 重大更新

☁️ 新 FileUpload 组件

隆重推出强大的新 FileUpload 组件,它通过内置的拖放和验证支持,使文件上传变得轻而易举(#4564).



了解更多https://ui.nuxtjs.org.cn/components/file-upload

🎨 全局默认变体

的全局默认值,以减少样板代码并确保一致的样式(#4400).

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      defaultVariants: {
        color: 'neutral',
        size: 'sm'
      }
    }
  }
})

了解更多https://ui.nuxtjs.org.cn/getting-started/installation/nuxt#themedefaultvariants

📊 增强的 Table 组件

Table 组件的重大改进带来了增强的功能和更好的用户体验。

  • 支持页脚,用于列摘要(#4194)
  • 支持上下文菜单(#4259)
  • 支持 colspan 和 rowspan(#4460)
  • 行悬停事件,以提高交互性(#2435)
  • 表格和列元数据中的自定义样式(#4513)

了解更多https://ui.nuxtjs.org.cn/components/table

属性(

属性中使用任意 attrs(

@OlegChuev 首次贡献于

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v3.2.0...v3.3.0

v3.2.0

✨ 重大更新

🏷️ 新 InputTags 组件

一个强大的新组件,用于使用干净的、基于标签的界面管理多个输入值(#4261).

了解更多https://ui.nuxtjs.org.cn/components/input-tags

⏱️ 新 Timeline 组件

推出 Timeline 组件,用于显示按时间顺序排列的序列和流程(#4215).

了解更多https://ui.nuxtjs.org.cn/components/timeline

我们对这些微小的重大变更表示歉意。在拥有 110 多个组件的库中,我们偶尔需要进行一些修正以保持一致性和质量。我们的目标是尽量减少重大变更,但有时为了长远的开发者体验,它们是必要的。

  • 函数的拼写(#4051)

属性(

属性中使用任意 attrs(

locale: 添加克罗地亚语(

@OlegChuev 首次贡献于

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v3.1.3...v3.2.0

v3.1.3

我们对这些微小的重大变更表示歉意。在拥有 110 多个组件的库中,我们偶尔需要进行一些修正以保持一致性和质量。我们的目标是尽量减少重大变更,但有时为了长远的开发者体验,它们是必要的。

  • 字段。

之前的补丁状态下显示子项,并使父元素尊重其链接属性。但是,感觉不太对,所以我们将其移除,改用https://github.com/nuxt/ui/commit/1e2a10b4bdebaef12316ac60f98a956dad21c1ec, https://github.com/nuxt/ui/commit/9cf9f25f4424447691e03e9034155d1541badd43https://github.com/nuxt/ui/commit/f2682fd2ae8abb7807977727fc22ef34cb5752e5.

  1. 父项现在尊重其链接属性,点击尾部图标箭头会展开/折叠其子项。
  2. 强制父项像以前一样工作(不带链接属性)。
  3. 属性或项字段。

属性(

属性中使用任意 attrs(

locale: 添加克罗地亚语(

@OlegChuev 首次贡献于

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v3.1.2...v3.1.3

v3.1.2

属性(

属性中使用任意 attrs(

locale: 添加克罗地亚语(

@OlegChuev 首次贡献于

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v3.1.1...v3.1.2

v3.1.1

属性(

属性中使用任意 attrs(

@OlegChuev 首次贡献于

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v3.1.0...v3.1.1

v3.1.0

✨ 重大更新

🎨 改进的实用程序类

的类非常麻烦。我们引入了三项主要改进:

- <div class="text-(--ui-primary)">
+ <div class="text-primary">

- <div class="bg-(--ui-error)">
+ <div class="bg-error">
  • 中性颜色实用程序 (#3629:新的实用程序类,用于文本、背景、边框、描边和分隔线颜色,它们映射到我们的设计系统变量。这些实用程序支持不透明度修饰符,并会自动适应您的颜色模式。https://ui.nuxtjs.org.cn/getting-started/theme#neutral
- <div class="text-(--ui-text-muted)">
+ <div class="text-muted">

- <div class="border-(--ui-border)">
+ <div class="border-default">

- <div class="bg-(--ui-bg-elevated)/50">
+ <div class="bg-elevated/50">
- <div class="rounded-(--ui-radius)">
+ <div class="rounded-sm">

- <div class="rounded-[calc(var(--ui-radius)*1.5)]">
+ <div class="rounded-md">

- <div class="rounded-[calc(var(--ui-radius)*2)]">
+ <div class="rounded-lg">

这些更改完全向后兼容——现有的基于 CSS 变量的类将继续工作,同时为新代码提供了更符合人体工程学的替代方案。

🧩 新组件和功能

<script setup lang="ts">
import type { CheckboxGroupItem, CheckboxGroupValue } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>(['System', 'Light', 'Dark'])
const value = ref<CheckboxGroupValue[]>(['System'])
</script>

<template>
  <UCheckboxGroup v-model="value" :items="items" />
</template>
<script setup lang="ts">
import type { RadioGroupItem, RadioGroupValue } from '@nuxt/ui'

const items = ref<RadioGroupItem[]>(['System', 'Light', 'Dark'])
const value = ref<RadioGroupValue>('System')
</script>

<template>
  <URadioGroup v-model="value" variant="table" :items="items" />
</template>

🌉 Inertia.js 集成

Vue 版本现已内置支持Inertia.js。在您的 vite.config.ts 文件中通过 inertia: true 选项启用它

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

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

这将自动将所有组件中的 RouterLink 替换为 InertiaLink,从而与您的 Inertia.js 应用程序实现无缝集成https://ui.nuxtjs.org.cn/getting-started/installation/vue#inertia

⚡ 模块构建器更新

模块已更新以使用nuxt/module-builder@1.0.0,带来了改进的构建性能和更好的 TypeScript 支持。

在此更改之后,我们重构了组件类型的处理方式,这带来了对 app.config.ts 更改的完全 HMR 支持,而以前这只在页面重新加载时才有效。

我们对这些微小的重大变更表示歉意。在拥有 110 多个组件的库中,我们偶尔需要进行一些修正以保持一致性和质量。我们的目标是尽量减少重大变更,但有时为了长远的开发者体验,它们是必要的。

  • OverlayProvider:.open() 返回一个 overlay 实例(#3829) (f3098df)

此 PR 将 .open() 修改为返回一个带有 result promise 属性的 overlay 实例,而不是直接返回 promise,提供了更大的灵活性

<script setup lang="ts>
const modal = useOverlay()

- const result = await modal.open({ count: count.value })
+ const instance = modal.open({ count: count.value })
+ const result = await instance.result
</script>

属性(

  • App:添加全局 portal 属性(#3688) (29fa462)
  • Carousel:添加 select 事件(#3678) (22edfd7)
  • CheckboxGroup:新组件(#3862) (9c3d53a)
  • components:添加新的 content-topcontent-bottom 插槽(#3886) (1a46394)
  • Form:添加 attach 属性以选择退出嵌套表单附加(#3939) (1a0d7a3)
  • Form:导出加载状态(#3861) (fdee252)
  • InputMenu/SelectMenu:处理 resetSearchTermOnSelectcea881a#3782
  • InputNumber:添加对 stepSnappingdisableWheelChange 属性的支持(#3731) (f5e6284)
  • Modal/Popover/Slideover:添加 close:prevent 事件(#3958) (f486423)
  • module:定义默认颜色阴影(#3916) (7ac7aa9)
  • module:定义中性工具类(#3629) (d49e0da)
  • module:动态 rounded-* 工具类(#3906) (f9737c8)
  • OverlayProvider:.open() 返回一个 overlay 实例(#3829) (f3098df)
  • PinInput:添加 autofocus / autofocus-delay 属性(0456670#3717
  • RadioGroup:添加 cardtable 变体(#3178) (4d138ad)
  • Select:处理项目中的 onSelect 字段(8640831)
  • Table:有条件地将类应用于 trtd#3866) (80dfa88)
  • Tabs:添加 list-leadinglist-trailing 插槽(#3837) (3447a06)
  • Textarea:添加 autoresize-delay 属性(06414d3#3730
  • Textarea:添加 iconloading 等属性以匹配 Input(cb193f1)
  • Textarea:添加 resize-none 类和 autoresize 属性(ffafd81)
  • unplugin: Inertia 的路由支持(#3845) (d059efc)

属性中使用任意 attrs(

  • Accordion:使用 div 代替 h3 作为标题标签(75e4792#3963
  • Alert/Toast:在使用插槽时显示操作(5086363#3950
  • Carousel:在移动设备上将箭头移入容器内(d339dcb#3813
  • CommandPalette:与其他组件保持一致的对齐(d25265c)
  • CommandPalette:增加输入字体大小以避免缩放(d227a10)
  • CommandPalette:禁用项不显示悬停背景(ba534f1)
  • components:升级 @nuxt/module-builder 后重构类型(#3855) (39c861a)
  • components:在 popper 内容中遵守 transform-origin#3919) (01d8dc7)
  • ContextMenu/DropdownMenu:处理 RTL 模式(#3744) (1ae5cc0)
  • ContextMenuContent/DropdownMenuContent:移除不必要的 any#3741) (97274f1)
  • Form:输入和输出类型推断(#3938) (f429498)
  • Form:提交时失去焦点(#3796) (8e78eb1)
  • InputMenu/SelectMenu:正确调用 onSelect 事件(#3735) (f25fed5)
  • InputMenu/SelectMenu:防止 disabled 项被选中(8435a0f#3474
  • InputMenu/SelectMenu:移除 valueKey 字符串大小写(9ca213b#3949 #3331
  • InputMenu/SelectMenu:支持任意 value#3779) (52a97e2)
  • InputMenu:在多次移除项目时发出 change 事件(9d2fed1#3756
  • Link:代理 download 属性(#3879) (47cdc2e)
  • NavigationMenu:添加 sm:w-auto 内容插槽(abe0859#3788
  • Skeleton:提高可访问性(#3613) (3484832)
  • Stepper: iconcontent 插槽的 ui 属性覆盖(1d45980#3785
  • Table:提高 data 的响应性(#3967) (6e27304)
  • Table:将表头 colspan 传递给 th#3926) (122e8ac)
  • Tree:简化可重用模板类型(#3836) (3deed4c)
  • types:允许颜色标识符带连字符(#3896) (e5a1e26)
  • types:处理 ui 属性中的 ClassValueeea1415#3860
  • types:改进动态插槽(#3857) (8dd9d08)
  • usePortal:调整 portal 目标解析逻辑(#3954) (db11db6)
  • vite: vitest 跳过 nuxt 导入转换(#3925) (c31bffa)

locale: 添加克罗地亚语(

@OlegChuev 首次贡献于

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v3.0.2...v3.1.0

v2.22.0

✨ 重大更新

  • deps:更新 @nuxt/module-builder 至 v1 (#3801)

模块已更新以使用nuxt/module-builder@1.0.0!

我们对这些微小的重大变更表示歉意。在拥有 110 多个组件的库中,我们偶尔需要进行一些修正以保持一致性和质量。我们的目标是尽量减少重大变更,但有时为了长远的开发者体验,它们是必要的。

  • Form:放弃对 zodvalibot 的显式支持 (#3618)

我们现在依赖standard-schema进行表单验证,配合 valibotzod。如果您在应用程序中使用它们,请确保升级到 valibot@1.0.0 / zod@3.24.0

属性中使用任意 attrs(

  • Link:正确拾取所有 aria-*data-* 属性(2bef1e2#3007
  • Table:复选框仍然发出 @select 事件(#3269) (c0e14d0)
  • Table:在模板中移除类型注解(4e96dcc#3146

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v2.21.1...v2.22.0

v3.0.2

属性(

  • Calendar:允许样式化年份和月份按钮(#3672) (4a2b77d)
  • Table:添加 empty 属性(afff54f)

属性中使用任意 attrs(

  • Avatar:$attrs 代理到默认插槽(#3712) (88f349d)
  • Button:使用 focus:outline-none 代替 focus:outline-hiddenc231fe5#3658
  • CommandPalette:使用 group.id 作为键(bc61d29)
  • components:改进泛型类型(#3331) (b998354)
  • Container:添加 w-full 类(df00149)
  • defineShortcuts:移除 @__NO_SIDE_EFFECTS__82e2665)
  • Drawer:移除 fadeFromIndex 属性代理(f7604e5)
  • Form:提交后清除脏状态(#3692) (3dd88ba)
  • FormField:help 添加到 aria-describedby 属性(#3691) (20c3392)
  • InputMenu/SelectMenu:空搜索结果(94b6e52)
  • InputMenu:update:open 时重置 searchTerm3074632#3620
  • Link:NuxtLink / RouterLink 一样处理 aria-currentc531d02)
  • Link:防止 active="true" 绑定到 html(d73768b)
  • Link:正确拾取所有 aria-*data-* 属性(ade16b7)
  • Link:代理 onClick370054b#3631
  • NavigationMenu:在视口上添加 z-index0095d89#3654
  • Switch:聚焦轮廓不进行过渡(68787b2)
  • Table: caption 插槽的错误条件(4ebb94c)
  • Tabs:移除 focus:outline-hidden 类(1769d5e)
  • types:为 ButtonGroup 添加缺失的导出(#3709) (e7e6745)
  • useOverlay:精炼 open 方法类型以推断关闭 emit 的返回值类型(#3716) (bd99c2d)
  • vue:模拟 nuxtApp.hooksuseRuntimeHook23bfeb9)

locale: 添加克罗地亚语(

@OlegChuev 首次贡献于

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v3.0.1...v3.0.2

v3.0.1

✨ 重大更新

  • module:处理没有 theme(static) 的 tailwindcss 导入(#3630) (ecff9ab)

您不再需要在使用 theme(static) 导入 tailwindcss 时使用它!🎉

main.css
- @import "tailwindcss" theme(static);
+ @import "tailwindcss";

但是,如果您在代码中显式使用 Tailwind CSS 变量,例如像这样,则可能仍需要它

<span
  :class="`bg-(--color-light) dark:bg-(--color-dark)`"
  :style="{
    '--color-light': `var(--color-${chip}-500)`,
    '--color-dark': `var(--color-${chip}-400)`
  }"
/>

我们对这些微小的重大变更表示歉意。在拥有 110 多个组件的库中,我们偶尔需要进行一些修正以保持一致性和质量。我们的目标是尽量减少重大变更,但有时为了长远的开发者体验,它们是必要的。

  • Form:放弃对 zodvalibot 的显式支持(#3617) (9a4bb34)

我们现在依赖standard-schema进行表单验证,配合 valibotzod。如果您在应用程序中使用它们,请确保升级到 valibot@1.0.0 / zod@3.24.0

我们已更新至vaul-vue@0.4.0,它为 Drawer 组件提供支持。不再有 handle 插槽,主题 handle 插槽在一些重要值方面有所变化,但您现在可以使用 handle-only 属性https://ui.nuxtjs.org.cn/components/drawer#handle-only

属性(

  • components:处理 content 属性中的事件(5dec0e1)

属性中使用任意 attrs(

  • Calendar:灰色显示不在当前月份内的日期(#3639) (a516866)
  • ContextMenu/DropdownMenu:proxySlots 中移除 any#3623) (764c41a)
  • Modal/Slideover/Toast:防止不必要的关闭实例化(f4c417d)
  • module:处理没有 theme(static) 的 tailwindcss 导入(#3630) (ecff9ab)
  • module:将导出中使用的函数标记为纯函数(#3604) (57efc78)
  • RadioGroup:处理项目上的 disabled 状态(fe0bd83nuxt/ui-pro#911
  • Table:@select 使用时允许打开链接(#3580) (e80cc15)
  • types:为 Icon 添加缺失的导出(#3568) (5e62493)
  • unplugin:在 auto-imports 路径中包含 @compodium/examples#3585) (cc504b8)
  • useLocale:@nuxt/ui-pro 中使用的唯一符号(#3603) (dec2730)
  • vue: useHead 在颜色中缺失上下文(#3589) (0897e9e)

locale: 添加克罗地亚语(

@OlegChuev 首次贡献于

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v3.0.0...v3.0.1

v3.0.0

我们很高兴推出 Nuxt UI v3,这是我们 UI 库的全面重新设计,在可访问性、性能和开发人员体验方面带来了重大改进。这次主要更新代表了我们团队和社区超过 1,500 次提交的辛勤工作、协作和创新。

https://nuxtjs.org.cn/blog/nuxt-ui-v4https://nuxtjs.org.cn/blog/nuxt-ui-v3

开始使用 Nuxt UI v3 →

✨ 重大更新

🧩 Reka UI:新基础

我们已从Headless UI过渡到Reka UI迁移到

  • 扩展组件库:访问 55 多个基础组件,大大扩展了我们的组件产品
  • 面向未来的开发:受益于 Reka UI 不断增长的受欢迎程度和持续改进
  • 一流的可访问性:内置的可访问性功能符合我们对包容性设计的承诺

🚀 Tailwind CSS v4 集成

Nuxt UI 现在利用最新的Tailwind CSS v4,提供

  • 卓越的性能:完整构建速度提高高达 5 倍,增量构建速度提高超过 100 倍
  • 简化的工具链:零附加工具即可实现内置导入处理、供应商前缀和语法转换
  • CSS 优先配置:在 CSS 中而不是 JavaScript 配置中自定义和扩展框架

🎨 Tailwind 变体

我们采用了Tailwind Variants来驱动我们的设计系统,提供

  • 动态样式:使用强大、直观的 API 创建灵活的组件变体
  • 类型安全:支持完整的 TypeScript 和智能自动补全
  • 智能冲突解决:以可预测的结果有效地合并冲突样式

📝 增强的 TypeScript 集成

Nuxt UI 提供了显著改进的 TypeScript 支持

  • 智能自动补全:根据您的主题配置为组件属性提供智能自动补全
  • 基于泛型的组件:使用Vue 3 Generics构建,并改进了插槽和事件的类型推断
  • 类型安全的 Th​​eming:利用 Tailwind Variants 和可自定义的类型进行扩展配置

🔄 Vue 兼容性

在任何 Vue 项目中无需 Nuxt 即可使用 Nuxt UI,只需将 Vite 和 Vue 插件添加到您的配置中

  • 自动导入:组件和组合式函数自动导入并全局可用
  • 完整的主题:支持完整的主题,具有可自定义的颜色、大小、变体等
  • 卓越的开发人员体验:全面的 TypeScript 支持,带有 IntelliSense 和自动补全

开始使用 Nuxt UI for Vue →

从 v2 迁移

我们想透明地说明:从 Nuxt UI v2 迁移到 v3 需要大量的努力。虽然我们保留了核心概念和组件,但 Nuxt UI v3 是从头开始重建的,以提供增强的功能。

要升级您的项目

  1. 阅读我们详细的迁移指南
  2. 在尝试升级之前,请查看新的文档和组件
  3. 在我们的GitHub 仓库

🙏 致谢

报告任何问题。此版本代表了我们团队和社区数千小时的工作。我们要感谢所有为实现 Nuxt UI v3 做出贡献的人,特别是 @romhml、@sandros94 和 @hywax,他们付出了巨大的努力。

v3.0.0-beta.4

我们对这些微小的重大变更表示歉意。在拥有 110 多个组件的库中,我们偶尔需要进行一些修正以保持一致性和质量。我们的目标是尽量减少重大变更,但有时为了长远的开发者体验,它们是必要的。

Nuxt UI v3.0.0-beta.4 需要 Nuxt v3.16 才能运行,请升级您的 Nuxt 以继续使用 @nuxt/ui

nuxi upgrade --force

属性(

属性中使用任意 attrs(

@OlegChuev 首次贡献于

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v3.0.0-beta.3...v3.0.0-beta.4

v2.21.1

属性(

  • Form:添加标准模式支持(#2880) (9c36d37)
  • module:添加 colorMode 选项(d2ceead#3143
  • SelectMenu:添加 inputTargetForm 属性以处理输入验证(#3107) (feb716c)

属性中使用任意 attrs(

@OlegChuev 首次贡献于

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v2.21.0...v2.21.1

v3.0.0-beta.3

属性(

属性中使用任意 attrs(

  • InputMenu/SelectMenu:在根属性中代理 required60b7e2d)
  • InputMenu:在多模式下 required 错误(01fa230#2741
  • Pagination:添加缺失的插槽(a47c5ff#3441
  • Pagination:下一页链接错误(e823022#3008
  • templates:防止覆盖现有颜色(ccbd89c#3426

@OlegChuev 首次贡献于

https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0: https://github.com/nuxt/ui/compare/v3.0.0-beta.2...v3.0.0-beta.3