更新日志版本
用法
ChangelogVersion 组件提供了一种灵活的方式来展示一个 <article> 元素,其中包含可自定义的内容,如标题、描述、图像等。
标题
使用 title 属性来显示 ChangelogVersion 的标题。
隆重推出 Nuxt UI v3
<template>
<UChangelogVersion title="Introducing Nuxt UI v3" />
</template>
描述
使用 description 属性来显示 ChangelogVersion 的描述。
隆重推出 Nuxt UI v3
<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
/>
</template>
日期
使用 date 属性来显示 ChangelogVersion 的日期。
Date 对象或字符串。隆重推出 Nuxt UI v3
<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
date="2025-03-12"
/>
</template>
Badge
使用 badge 属性在 ChangelogVersion 上显示一个 Badge(徽标)。
隆重推出 Nuxt UI v3
<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
date="2025-03-12"
badge="Release"
/>
</template>
您可以将 Badge 组件的任何 prop 传递过来以对其进行自定义。
隆重推出 Nuxt UI v3
<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
date="2025-03-12"
:badge="{
label: 'Release',
color: 'primary',
variant: 'outline'
}"
/>
</template>
图片
使用 image 属性在 BlogPost 中显示一张图片。
隆重推出 Nuxt UI v3

<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
date="2025-03-12"
image="https://nuxtjs.org.cn/assets/blog/nuxt-ui-v3.png"
/>
</template>
作者
使用 authors 属性以对象数组的形式在 ChangelogVersion 中显示 User(用户) 列表,这些对象包含以下属性:
name?: stringdescription?: stringavatar?: Omit<AvatarProps, 'size'>chip?: boolean | Omit<ChipProps, 'size' | 'inset'>size?: UserProps['size']orientation?: UserProps['orientation']
您可以将 Link 组件的任何 prop 传递过来,例如 to、target 等。
<script setup lang="ts">
import type { UserProps } from '@nuxt/ui'
const authors = ref<UserProps[]>([
{
name: 'Benjamin Canac',
description: '@benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy'
},
to: 'https://x.com/benjamincanac',
target: '_blank'
},
{
name: 'Sebastien Chopin',
description: '@atinux',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy'
},
to: 'https://x.com/atinux',
target: '_blank'
},
{
name: 'Hugo Richard',
description: '@hugorcd__',
avatar: {
src: 'https://github.com/hugorcd.png',
loading: 'lazy'
},
to: 'https://x.com/hugorcd__',
target: '_blank'
}
])
</script>
<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
date="2025-03-12"
image="https://nuxtjs.org.cn/assets/blog/nuxt-ui-v3.png"
:authors="authors"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { UserProps } from '@nuxt/ui'
const authors = ref<UserProps[]>([
{
name: 'Benjamin Canac',
description: '@benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy'
},
to: 'https://x.com/benjamincanac',
target: '_blank'
},
{
name: 'Sebastien Chopin',
description: '@atinux',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy'
},
to: 'https://x.com/atinux',
target: '_blank'
},
{
name: 'Hugo Richard',
description: '@hugorcd__',
avatar: {
src: 'https://github.com/hugorcd.png',
loading: 'lazy'
},
to: 'https://x.com/hugorcd__',
target: '_blank'
}
])
</script>
<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
date="2025-03-12"
image="https://nuxtjs.org.cn/assets/blog/nuxt-ui-v3.png"
:authors="authors"
/>
</template>
Link
你可以传递 <NuxtLink> 组件的任何属性,例如 to、target、rel 等。
<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
date="2025-03-12"
image="https://nuxtjs.org.cn/assets/blog/nuxt-ui-v3.png"
to="https://nuxtjs.org.cn/blog/nuxt-ui-v3"
target="_blank"
/>
</template>
指示器
使用 indicator 属性来隐藏左侧的指示点。默认为 true。
隆重推出 Nuxt UI v3

<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
date="2025-03-12"
image="https://nuxtjs.org.cn/assets/blog/nuxt-ui-v3.png"
:indicator="false"
/>
</template>
indicator 属性为 false 时,日期将显示在标题上方。示例
使用 body 插槽
你可以使用 body 插槽在图像和作者之间显示自定义内容,方法是:
- 使用 MDC 来自
@nuxtjs/mdc来显示 Markdown。 - 使用 ContentRenderer 来自
@nuxt/content来渲染页面或列表的内容。 - 或者直接在内容中使用
:u-changelog-version组件,并在body插槽内放入 Markdown,因为 Nuxt UI 提供了预设样式的 prose 组件。

我们非常高兴地推出 Nuxt UI v3,这是我们 UI 库的一次全面重新设计,在可访问性、性能和开发者体验方面带来了重大改进。这次重大更新代表了我们团队和社区超过 1,500 次专注的工作、协作和创新。
阅读博客文章公告:https://nuxtjs.org.cn/blog/nuxt-ui-v3
🧩 Reka UI:新的基石
我们已从 Headless UI 过渡到 Reka UI 作为我们的核心组件基础,带来了:
- 扩展的组件库:访问 55+ 个原语,极大地扩展了我们的组件供应
- 面向未来的开发:受益于 Reka UI 日益增长的普及度和持续的改进
- 一流的可访问性:符合我们对包容性设计承诺的内置可访问性功能
🚀 Tailwind CSS 集成
Nuxt UI 现在利用最新的 Tailwind CSS,提供:
- 卓越的性能:完整构建速度提升高达 5 倍,增量构建速度提升超过 100 倍
- 精简的工具链:内置导入处理、供应商前缀和语法转换,无需额外的工具
- CSS 优先的配置:直接在 CSS 中自定义和扩展框架,而不是使用 JavaScript 配置
🎨 Tailwind Variants
我们采用了 Tailwind Variants 来驱动我们的设计系统,提供:
- 动态样式:使用强大直观的 API 创建灵活的组件变体
- 类型安全:完整的 TypeScript 支持,带有智能自动补全
- 智能冲突解决:高效地合并冲突样式,结果可预测
从 v2 迁移
我们想坦诚说明:从 Nuxt UI v2 迁移到 v3 需要付出巨大努力。虽然我们保留了核心概念和组件,但 Nuxt UI v3 是从零开始重建的,旨在提供增强的功能。
升级你的项目
🙏 致谢
此版本代表了我们团队和社区数千小时的工作。我们要感谢每一位为实现 Nuxt UI v3 做出贡献的人,特别是 @romhml、@sandros94 和 @hywax 的巨大贡献。
<script setup lang="ts">
const content = `

We are thrilled to introduce Nuxt UI v3, a comprehensive redesign of our UI library that delivers significant improvements in accessibility, performance, and developer experience. This major update represents over 1,500 commits of dedicated work, collaboration, and innovation from our team and the community.
Read the blog post announcement: https://nuxtjs.org.cn/blog/nuxt-ui-v3
**[Get started with Nuxt UI v3 →](https://ui3.nuxt.com/getting-started/installation/nuxt)**
### 🧩 Reka UI: A New Foundation
We've transitioned from [Headless UI](https://headlessui.tailwind.org.cn/) to [Reka UI](https://reka-ui.cn/) as our core component foundation, bringing:
- **Expanded Component Library**: Access to 55+ primitives, significantly expanding our component offerings
- **Future-Proof Development**: Benefit from Reka UI's growing popularity and continuous improvements
- **First-Class Accessibility**: Built-in accessibility features aligned with our commitment to inclusive design
### 🚀 Tailwind CSS Integration
Nuxt UI now leverages the latest [Tailwind CSS](https://tailwind.org.cn), delivering:
- **Exceptional Performance**: Full builds up to 5× faster, with incremental builds over 100× faster
- **Streamlined Toolchain**: Built-in import handling, vendor prefixing, and syntax transforms with zero additional tooling
- **CSS-First Configuration**: Customize and extend the framework directly in CSS instead of JavaScript configuration
### 🎨 Tailwind Variants
We've adopted [Tailwind Variants](https://www.tailwind-variants.org/) to power our design system, offering:
- **Dynamic Styling**: Create flexible component variants with a powerful, intuitive API
- **Type Safety**: Full TypeScript support with intelligent auto-completion
- **Smart Conflict Resolution**: Efficiently merge conflicting styles with predictable results
## Migration from v2
We want to be transparent: migrating from Nuxt UI v2 to v3 requires significant effort. While we've maintained core concepts and components, Nuxt UI v3 has been rebuilt from the ground up to provide enhanced capabilities.
To upgrade your project:
1. Read our detailed [migration guide](https://ui3.nuxt.com/getting-started/migration)
2. Review the new documentation and components before attempting to upgrade
3. Report any issues on our [GitHub repository](https://github.com/nuxt/ui/issues)
## 🙏 Acknowledgements
This release represents thousands of hours of work from our team and the community. We'd like to thank everyone who contributed to making Nuxt UI v3 a reality, especially @romhml, @sandros94, and @hywax for their tremendous work.
`
const version = {
title: 'Introducing Nuxt UI v3',
description:
'Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility.',
date: '2025-03-12T00:00:00.000Z',
badge: 'Release',
to: 'https://nuxtjs.org.cn/blog/nuxt-ui-v3',
target: '_blank',
content,
authors: [
{
name: 'Benjamin Canac',
avatar: {
src: 'https://github.com/benjamincanac.png',
alt: 'Benjamin Canac',
loading: 'lazy' as const
},
to: 'https://github.com/benjamincanac',
target: '_blank'
}
]
}
</script>
<template>
<UChangelogVersion v-bind="version" :ui="{ container: 'max-w-lg' }" class="w-full">
<template #body>
<MDC :value="version.content" />
</template>
</UChangelogVersion>
</template>
<script setup lang="ts">
import { provide } from 'vue'
const content = `

We are thrilled to introduce Nuxt UI v3, a comprehensive redesign of our UI library that delivers significant improvements in accessibility, performance, and developer experience. This major update represents over 1,500 commits of dedicated work, collaboration, and innovation from our team and the community.
Read the blog post announcement: https://nuxtjs.org.cn/blog/nuxt-ui-v3
**[Get started with Nuxt UI v3 →](https://ui3.nuxt.com/getting-started/installation/nuxt)**
### 🧩 Reka UI: A New Foundation
We've transitioned from [Headless UI](https://headlessui.tailwind.org.cn/) to [Reka UI](https://reka-ui.cn/) as our core component foundation, bringing:
- **Expanded Component Library**: Access to 55+ primitives, significantly expanding our component offerings
- **Future-Proof Development**: Benefit from Reka UI's growing popularity and continuous improvements
- **First-Class Accessibility**: Built-in accessibility features aligned with our commitment to inclusive design
### 🚀 Tailwind CSS Integration
Nuxt UI now leverages the latest [Tailwind CSS](https://tailwind.org.cn), delivering:
- **Exceptional Performance**: Full builds up to 5× faster, with incremental builds over 100× faster
- **Streamlined Toolchain**: Built-in import handling, vendor prefixing, and syntax transforms with zero additional tooling
- **CSS-First Configuration**: Customize and extend the framework directly in CSS instead of JavaScript configuration
### 🎨 Tailwind Variants
We've adopted [Tailwind Variants](https://www.tailwind-variants.org/) to power our design system, offering:
- **Dynamic Styling**: Create flexible component variants with a powerful, intuitive API
- **Type Safety**: Full TypeScript support with intelligent auto-completion
- **Smart Conflict Resolution**: Efficiently merge conflicting styles with predictable results
## Migration from v2
We want to be transparent: migrating from Nuxt UI v2 to v3 requires significant effort. While we've maintained core concepts and components, Nuxt UI v3 has been rebuilt from the ground up to provide enhanced capabilities.
To upgrade your project:
1. Read our detailed [migration guide](https://ui3.nuxt.com/getting-started/migration)
2. Review the new documentation and components before attempting to upgrade
3. Report any issues on our [GitHub repository](https://github.com/nuxt/ui/issues)
## 🙏 Acknowledgements
This release represents thousands of hours of work from our team and the community. We'd like to thank everyone who contributed to making Nuxt UI v3 a reality, especially @romhml, @sandros94, and @hywax for their tremendous work.
`
const version = {
title: 'Introducing Nuxt UI v3',
description:
'Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility.',
date: '2025-03-12T00:00:00.000Z',
badge: 'Release',
to: 'https://nuxtjs.org.cn/blog/nuxt-ui-v3',
target: '_blank',
content,
authors: [
{
name: 'Benjamin Canac',
avatar: {
src: 'https://github.com/benjamincanac.png',
alt: 'Benjamin Canac',
loading: 'lazy' as const
},
to: 'https://github.com/benjamincanac',
target: '_blank'
}
]
}
</script>
<template>
<UChangelogVersion v-bind="version" :ui="{ container: 'max-w-lg' }" class="w-full">
<template #body>
<MDC :value="version.content" />
</template>
</UChangelogVersion>
</template>
API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as | 'article' | any此组件应渲染为的元素或组件。 |
title | string | |
description | string | |
日期 | string | Date更新日志版本的日期。可以是字符串或 Date 对象。 | |
徽章 | 字符串 | BadgeProps在更新日志版本上显示徽标。可以是字符串或对象。 | |
authors | UserProps[]更新日志版本的作者。 | |
图片 | string | Partial<ImgHTMLAttributes> & { [key: string]: any; }更新日志版本的图片。可以是字符串或对象。 | |
indicator | true | boolean在左侧显示指示点。 |
过渡到 | string | St | vt | |
target | null | "_blank" | "_parent" | "_self" | "_top" | string & {} | |
ui | { root?: ClassNameValue; container?: ClassNameValue; header?: ClassNameValue; meta?: ClassNameValue; date?: ClassNameValue; badge?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; imageWrapper?: ClassNameValue; image?: ClassNameValue; authors?: ClassNameValue; footer?: ClassNameValue; indicator?: ClassNameValue; dot?: ClassNameValue; dotInner?: ClassNameValue; } |
插槽
| 插槽 | 类型 |
|---|---|
页头 | {} |
徽章 | { ui: object; } |
日期 | {} |
title | {} |
description | {} |
图片 | { ui: object; } |
主体 | {} |
页脚 | {} |
authors | {} |
actions | {} |
indicator | { ui: object; } |
主题
export default defineAppConfig({
ui: {
changelogVersion: {
slots: {
root: 'relative',
container: 'flex flex-col mx-auto max-w-2xl',
header: '',
meta: 'flex items-center gap-3 mb-2',
date: 'text-sm/6 text-toned truncate',
badge: '',
title: 'relative text-xl text-pretty font-semibold text-highlighted',
description: 'text-base text-pretty text-muted mt-1',
imageWrapper: 'relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image',
image: 'object-cover object-top w-full h-full',
authors: 'flex flex-wrap gap-x-4 gap-y-1.5',
footer: 'border-t border-default pt-5 flex items-center justify-between',
indicator: 'absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0',
dot: 'size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1',
dotInner: 'size-2 rounded-full bg-primary'
},
variants: {
body: {
false: {
footer: 'mt-5'
}
},
badge: {
false: {
meta: 'lg:hidden'
}
},
to: {
true: {
title: [
'has-focus-visible:ring-2 has-focus-visible:ring-primary rounded-xs',
'transition'
],
image: 'transform transition-transform duration-200 group-hover/changelog-version-image:scale-105 group-has-focus-visible/changelog-version-image:scale-105'
}
},
hidden: {
true: {
date: 'lg:hidden'
}
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
changelogVersion: {
slots: {
root: 'relative',
container: 'flex flex-col mx-auto max-w-2xl',
header: '',
meta: 'flex items-center gap-3 mb-2',
date: 'text-sm/6 text-toned truncate',
badge: '',
title: 'relative text-xl text-pretty font-semibold text-highlighted',
description: 'text-base text-pretty text-muted mt-1',
imageWrapper: 'relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image',
image: 'object-cover object-top w-full h-full',
authors: 'flex flex-wrap gap-x-4 gap-y-1.5',
footer: 'border-t border-default pt-5 flex items-center justify-between',
indicator: 'absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0',
dot: 'size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1',
dotInner: 'size-2 rounded-full bg-primary'
},
variants: {
body: {
false: {
footer: 'mt-5'
}
},
badge: {
false: {
meta: 'lg:hidden'
}
},
to: {
true: {
title: [
'has-focus-visible:ring-2 has-focus-visible:ring-primary rounded-xs',
'transition'
],
image: 'transform transition-transform duration-200 group-hover/changelog-version-image:scale-105 group-has-focus-visible/changelog-version-image:scale-105'
}
},
hidden: {
true: {
date: 'lg:hidden'
}
}
}
}
}
})
]
})