ChangelogVersionPRO

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 属性来显示 ChangelogVersion 的标题。

Nuxt UI v3 介绍

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

描述

使用 description 属性来显示 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 属性来显示 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 属性来在 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."
    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 属性在 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 属性以包含以下属性的对象数组形式在 ChangelogVersion 中显示用户列表

  • 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 属性来隐藏左侧的指示点。默认为 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 属性为 false 时，日期将显示在标题上方。

示例

使用 body 插槽

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

  • 该MDC组件（来自 @nuxtjs/mdc）来显示 markdown。
  • 该ContentRenderer组件（来自 @nuxt/content）来渲染页面或列表内容。
  • 或者直接在内容中使用 :u-changelog-version 组件，并将 markdown 放入 body 插槽中，因为 Nuxt UI Pro 提供了预设样式的 prose 组件。
<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://ui.nuxtjs.org.cn/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://ui.nuxtjs.org.cn/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

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

title

string

description

string

date

string | Date

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

badge

string | BadgeProps

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

authors

UserProps[]

变更日志版本的作者。

image

string | Partial<HTMLImageElement>

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

indicator

true

boolean

在左侧显示一个指示点。

过渡到

string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

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; }

插槽

插槽类型
页头

{}

badge

{}

date

{}

title

{}

description

{}

image

{}

主体

{}

页脚

{}

authors

{}

actions

{}

indicator

{}

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    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 left-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({
      uiPro: {
        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 left-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 uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        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 left-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'
              }
            }
          }
        }
      }
    })
  ]
})

Carousel

一个使用 Embla 构建的带有动画和滑动的轮播。

ChangelogVersions

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