更新日志版本

GitHub
一个可自定义的文章，用于在更新日志中显示。

用法

ChangelogVersion 组件提供了一种灵活的方式来显示一个 <article> 元素，其中包含可自定义的内容，包括标题、描述、图像等。

推出 Nuxt UI v3

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

Benjamin Canac

@benjamincanac

Sebastien Chopin

Sebastien Chopin

@atinux

Hugo Richard

Hugo Richard

@hugorcd__

使用 ChangelogVersions 组件在时间轴中显示多个变更日志版本，并在左侧带有一个指示器条。

标题

使用 title prop 显示 ChangelogVersion 的标题。

推出 Nuxt UI v3

<template>
  <UChangelogVersion title="Introducing Nuxt UI v3" />
</template>

描述

使用 description prop 显示 ChangelogVersion 的描述。

推出 Nuxt UI v3

Nuxt UI v3 现已发布！经过 1500 多次提交，此重大重新设计带来了改进的可访问性、对 Tailwind CSS v4 的支持以及完整的 Vue 兼容性。
<template>
  <UChangelogVersion
    title="Introducing Nuxt UI v3"
    description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS v4 support, and full Vue compatibility."
  />
</template>

日期

使用 date prop 显示 ChangelogVersion 的日期。

日期会自动格式化为当前区域设置。您可以传递 Date 对象或字符串。

推出 Nuxt UI v3

Nuxt UI v3 现已发布！经过 1500 多次提交，此重大重新设计带来了改进的可访问性、对 Tailwind CSS v4 的支持以及完整的 Vue 兼容性。
<template>
  <UChangelogVersion
    title="Introducing Nuxt UI v3"
    description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS v4 support, and full Vue compatibility."
    date="2025-03-12"
  />
</template>

Badge

使用 badge prop 在 ChangelogVersion 上显示一个 Badge。

发布

推出 Nuxt UI v3

Nuxt UI v3 现已发布！经过 1500 多次提交，此重大重新设计带来了改进的可访问性、对 Tailwind CSS v4 的支持以及完整的 Vue 兼容性。
<template>
  <UChangelogVersion
    title="Introducing Nuxt UI v3"
    description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS v4 support, and full Vue compatibility."
    date="2025-03-12"
    badge="Release"
  />
</template>

您可以传递 Badge 组件的任何属性来对其进行自定义。

发布

推出 Nuxt UI v3

Nuxt UI v3 现已发布！经过 1500 多次提交，此重大重新设计带来了改进的可访问性、对 Tailwind CSS v4 的支持以及完整的 Vue 兼容性。
<template>
  <UChangelogVersion
    title="Introducing Nuxt UI v3"
    description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS v4 support, and full Vue compatibility."
    date="2025-03-12"
    :badge="{
      label: 'Release',
      color: 'primary',
      variant: 'outline'
    }"
  />
</template>

图片

使用 image prop 在 BlogPost 中显示图像。

如果@nuxt/image已安装，将使用 <NuxtImg> 组件而不是原生 img 标签。

推出 Nuxt UI v3

Nuxt UI v3 现已发布！经过 1500 多次提交，此重大重新设计带来了改进的可访问性、对 Tailwind CSS v4 的支持以及完整的 Vue 兼容性。
Introducing 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 v4 support, and full Vue compatibility."
    date="2025-03-12"
    image="https://nuxtjs.org.cn/assets/blog/nuxt-ui-v3.png"
  />
</template>

作者

使用 authors prop 在 ChangelogVersion 中显示 User 列表，作为具有以下属性的对象数组

  • name?: string
  • description?: string
  • avatar?: Omit<AvatarProps, 'size'>
  • chip?: boolean | Omit<ChipProps, 'size' | 'inset'>
  • size?: UserProps['size']
  • orientation?: UserProps['orientation']

您可以传递 Link 组件的任何属性，例如 to、target 等。

推出 Nuxt UI v3

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

Benjamin Canac

@benjamincanac

Sebastien Chopin

Sebastien Chopin

@atinux

Hugo Richard

Hugo Richard

@hugorcd__

<script setup lang="ts">
const authors = ref([
  {
    name: 'Benjamin Canac',
    description: '@benjamincanac',
    avatar: {
      src: 'https://github.com/benjamincanac.png'
    },
    to: 'https://x.com/benjamincanac',
    target: '_blank'
  },
  {
    name: 'Sebastien Chopin',
    description: '@atinux',
    avatar: {
      src: 'https://github.com/atinux.png'
    },
    to: 'https://x.com/atinux',
    target: '_blank'
  },
  {
    name: 'Hugo Richard',
    description: '@hugorcd__',
    avatar: {
      src: 'https://github.com/hugorcd.png'
    },
    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 v4 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 等。

推出 Nuxt UI v3

Nuxt UI v3 现已发布！经过 1500 多次提交，此重大重新设计带来了改进的可访问性、对 Tailwind CSS v4 的支持以及完整的 Vue 兼容性。
Introducing 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 v4 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 prop 隐藏左侧的指示器点。默认为 true。

推出 Nuxt UI v3

Nuxt UI v3 现已发布！经过 1500 多次提交，此重大重新设计带来了改进的可访问性、对 Tailwind CSS v4 的支持以及完整的 Vue 兼容性。
Introducing 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 v4 support, and full Vue compatibility."
    date="2025-03-12"
    image="https://nuxtjs.org.cn/assets/blog/nuxt-ui-v3.png"
    :indicator="false"
  />
</template>
当 indicator prop 为 false 时，日期将显示在标题上方。

示例

带 body 插槽

您可以使用 body 插槽在图像和作者之间显示自定义内容，使用

  • 这个MDC来自 @nuxtjs/mdc 的组件来显示 Markdown。
  • 这个ContentRenderer来自 @nuxt/content 的组件用于渲染页面或列表的内容。
  • 或者直接在内容中使用 :u-changelog-version 组件，在 body 插槽中包含 markdown，因为 Nuxt UI 提供了预设样式的散文组件。
发布

推出 Nuxt UI v3

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

我们很高兴推出 Nuxt UI v3，这是我们 UI 库的全面重新设计，在可访问性、性能和开发者体验方面都取得了显著改进。这次重大更新代表了我们团队和社区超过 1,500 次提交的专注工作、协作和创新。

阅读博客文章公告https://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，并提供智能自动补全
  • 智能冲突解决：通过可预测的结果高效合并冲突样式

从 v2 迁移

我们希望透明地说明：从 Nuxt UI v2 迁移到 v3 需要付出巨大的努力。虽然我们保留了核心概念和组件，但 Nuxt UI v3 已从头开始重建，以提供增强的功能。

要升级您的项目

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

报告任何问题

🙏 致谢

Benjamin Canac

Benjamin Canac

<script setup lang="ts">
const content = `
![Nuxt UI v3](https://nuxtjs.org.cn/assets/blog/nuxt-ui-v3.png)

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 v4 Integration

Nuxt UI now leverages the latest [Tailwind CSS v4](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 v4 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'
      },
      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

此组件应渲染为的元素或组件。

titlestring
descriptionstring
日期此版本代表了我们团队和社区数千小时的工作。我们要感谢所有为实现 Nuxt UI v3 做出贡献的人，特别是 @romhml、@sandros94 和 @hywax 的巨大贡献。

变更日志版本的日期。可以是字符串或 Date 对象。

徽章字符串 | BadgeProps

在变更日志版本上显示徽章。可以是字符串或对象。 { color: 'neutral', variant: 'solid' }

authorsUserProps[]

变更日志版本的作者。

图片string | Partial<HTMLImageElement> & { [key: string]: any; }

变更日志版本的图像。可以是字符串或对象。

indicatortrueboolean

在左侧显示指示点。

过渡到string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
targetnull | "_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; }

主题

app.config.ts
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: {
            image: 'transform transition-transform duration-200 group-hover/changelog-version-image:scale-105'
          }
        },
        hidden: {
          true: {
            date: 'lg:hidden'
          }
        }
      }
    }
  }
})
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({
      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: {
                image: 'transform transition-transform duration-200 group-hover/changelog-version-image:scale-105'
              }
            },
            hidden: {
              true: {
                date: 'lg:hidden'
              }
            }
          }
        }
      }
    })
  ]
})

更新日志

dd81d— feat: 添加 data-slot 属性 (#5447)

9632f— 修复：允许 image prop 中的任何属性

63c0a— feat: 在使用的 slot prop 中暴露 ui (#5207)

5cb65— 特性：导入 @nuxt/ui-pro 组件

博客文章

以响应式网格布局显示博客文章列表。

变更日志版本

在时间轴中显示变更日志版本列表。