更新日志版本列表

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

用法

ChangelogVersions 组件提供了一个灵活的布局，可以使用默认插槽或 versions 属性来显示 ChangelogVersion 组件列表。

<template>
  <UChangelogVersions>
    <UChangelogVersion
      v-for="(version, index) in versions"
      :key="index"
      v-bind="post"
    />
  </UChangelogVersions>
</template>

版本

将 versions 属性用作对象数组，其中包含 ChangelogVersion 组件的属性。

Nuxt 3.17

Nuxt 3.17 发布 - 带来了异步数据层的重大重构、一个新的内置组件、更好的警告和性能改进！
Nuxt 3.17

Nuxt 3.16

Nuxt 3.16 发布 - packed with features and performance improvements!
Nuxt 3.16

Nuxt 3.15

Nuxt 3.15 发布 - 带有 Vite 6、更好的 HMR 和更快的性能！
Nuxt 3.15
<script setup lang="ts">
const versions = ref([
  {
    title: 'Nuxt 3.17',
    description: 'Nuxt 3.17 is out - bringing a major reworking of the async data layer, a new built-in component, better warnings, and performance improvements!',
    image: 'https://nuxtjs.org.cn/assets/blog/v3.17.png',
    date: '2025-04-27',
    to: 'https://nuxtjs.org.cn/blog/v3-17',
    target: '_blank',
    ui: {
      container: 'max-w-lg'
    }
  },
  {
    title: 'Nuxt 3.16',
    description: 'Nuxt 3.16 is out - packed with features and performance improvements!',
    image: 'https://nuxtjs.org.cn/assets/blog/v3.16.png',
    date: '2025-03-07',
    to: 'https://nuxtjs.org.cn/blog/v3-16',
    target: '_blank',
    ui: {
      container: 'max-w-lg'
    }
  },
  {
    title: 'Nuxt 3.15',
    description: 'Nuxt 3.15 is out - with Vite 6, better HMR and faster performance!',
    image: 'https://nuxtjs.org.cn/assets/blog/v3.15.png',
    date: '2024-12-24',
    to: 'https://nuxtjs.org.cn/blog/v3-15',
    target: '_blank',
    ui: {
      container: 'max-w-lg'
    }
  }
])
</script>

<template>
  <UChangelogVersions :versions="versions" />
</template>

指示器

使用 indicator 属性可隐藏左侧的指示器栏。默认为 true。

Nuxt 3.17

Nuxt 3.17 发布 - 带来了异步数据层的重大重构、一个新的内置组件、更好的警告和性能改进！
Nuxt 3.17

Nuxt 3.16

Nuxt 3.16 发布 - packed with features and performance improvements!
Nuxt 3.16

Nuxt 3.15

Nuxt 3.15 发布 - 带有 Vite 6、更好的 HMR 和更快的性能！
Nuxt 3.15
<script setup lang="ts">
const versions = ref([
  {
    title: 'Nuxt 3.17',
    description: 'Nuxt 3.17 is out - bringing a major reworking of the async data layer, a new built-in component, better warnings, and performance improvements!',
    image: 'https://nuxtjs.org.cn/assets/blog/v3.17.png',
    date: '2025-04-27',
    to: 'https://nuxtjs.org.cn/blog/v3-17',
    target: '_blank',
    ui: {
      container: 'max-w-lg'
    }
  },
  {
    title: 'Nuxt 3.16',
    description: 'Nuxt 3.16 is out - packed with features and performance improvements!',
    image: 'https://nuxtjs.org.cn/assets/blog/v3.16.png',
    date: '2025-03-07',
    to: 'https://nuxtjs.org.cn/blog/v3-16',
    target: '_blank',
    ui: {
      container: 'max-w-lg'
    }
  },
  {
    title: 'Nuxt 3.15',
    description: 'Nuxt 3.15 is out - with Vite 6, better HMR and faster performance!',
    image: 'https://nuxtjs.org.cn/assets/blog/v3.15.png',
    date: '2024-12-24',
    to: 'https://nuxtjs.org.cn/blog/v3-15',
    target: '_blank',
    ui: {
      container: 'max-w-lg'
    }
  }
])
</script>

<template>
  <UChangelogVersions :indicator="false" :versions="versions" />
</template>

指示器运动

使用 indicator-motion 属性可自定义或隐藏指示器栏上的运动效果。默认为 true，并带有 { damping: 30, restDelta: 0.001 }弹簧过渡选项.

Nuxt 3.17

Nuxt 3.17 发布 - 带来了异步数据层的重大重构、一个新的内置组件、更好的警告和性能改进！
Nuxt 3.17

Nuxt 3.16

Nuxt 3.16 发布 - packed with features and performance improvements!
Nuxt 3.16

Nuxt 3.15

Nuxt 3.15 发布 - 带有 Vite 6、更好的 HMR 和更快的性能！
Nuxt 3.15
<script setup lang="ts">
const versions = ref([
  {
    title: 'Nuxt 3.17',
    description: 'Nuxt 3.17 is out - bringing a major reworking of the async data layer, a new built-in component, better warnings, and performance improvements!',
    image: 'https://nuxtjs.org.cn/assets/blog/v3.17.png',
    date: '2025-04-27',
    to: 'https://nuxtjs.org.cn/blog/v3-17',
    target: '_blank',
    ui: {
      container: 'max-w-lg'
    }
  },
  {
    title: 'Nuxt 3.16',
    description: 'Nuxt 3.16 is out - packed with features and performance improvements!',
    image: 'https://nuxtjs.org.cn/assets/blog/v3.16.png',
    date: '2025-03-07',
    to: 'https://nuxtjs.org.cn/blog/v3-16',
    target: '_blank',
    ui: {
      container: 'max-w-lg'
    }
  },
  {
    title: 'Nuxt 3.15',
    description: 'Nuxt 3.15 is out - with Vite 6, better HMR and faster performance!',
    image: 'https://nuxtjs.org.cn/assets/blog/v3.15.png',
    date: '2024-12-24',
    to: 'https://nuxtjs.org.cn/blog/v3-15',
    target: '_blank',
    ui: {
      container: 'max-w-lg'
    }
  }
])
</script>

<template>
  <UChangelogVersions :versions="versions" />
</template>

示例

尽管这些示例使用Nuxt Content，但这些组件可以与任何内容管理系统集成。

在页面内

在页面中使用 ChangelogVersions 组件创建变更日志页面

pages/changelog.vue
<script setup lang="ts">
const { data: versions } = await useAsyncData('versions', () => queryCollection('versions').all())
</script>

<template>
  <UPage>
    <UPageHero title="Changelog" />

    <UPageBody>
      <UChangelogVersions>
        <UChangelogVersion
          v-for="(version, index) in versions"
          :key="index"
          v-bind="version"
          :to="version.path"
        />
      </UChangelogVersions>
    </UPageBody>
  </UPage>
</template>
在此示例中，versions 是使用 @nuxt/content 模块中的 queryCollection 获取的。
由于 @nuxt/content 使用 path 属性，因此此处会覆盖 to 属性。

带粘性指示器

您可以使用 ui 属性和不同的插槽使指示器具有粘性

v3.17.02025 年 4 月 27 日

Nuxt 3.17

Nuxt 3.17 发布 - 带来了异步数据层的重大重构、一个新的内置组件、更好的警告和性能改进！
Nuxt 3.17
Daniel Roe

丹尼尔·罗

v3.16.02024 年 3 月 7 日

Nuxt 3.16

Nuxt 3.16 发布 - packed with features and performance improvements!
Nuxt 3.16
Daniel Roe

丹尼尔·罗

v3.15.02024 年 12 月 24 日

Nuxt 3.15

Nuxt 3.15 发布 - 带有 Vite 6、更好的 HMR 和更快的性能！
Nuxt 3.15
Daniel Roe

丹尼尔·罗

<script setup lang="ts">
const versions = [
  {
    title: 'Nuxt 3.17',
    description:
      'Nuxt 3.17 is out - bringing a major reworking of the async data layer, a new built-in component, better warnings, and performance improvements!',
    date: '2025-04-27T00:00:00.000Z',
    image: 'https://nuxtjs.org.cn/assets/blog/v3.17.png',
    badge: 'v3.17.0',
    to: 'https://nuxtjs.org.cn/blog/nuxt-3-17',
    target: '_blank',
    authors: [
      {
        name: 'Daniel Roe',
        avatar: {
          src: 'https://github.com/danielroe.png',
          alt: 'Daniel Roe'
        },
        to: 'https://github.com/danielroe',
        target: '_blank'
      }
    ]
  },
  {
    title: 'Nuxt 3.16',
    description: 'Nuxt 3.16 is out - packed with features and performance improvements!',
    date: '2024-03-07T00:00:00.000Z',
    image: 'https://nuxtjs.org.cn/assets/blog/v3.16.png',
    badge: 'v3.16.0',
    to: 'https://nuxtjs.org.cn/blog/v3-16',
    target: '_blank',
    authors: [
      {
        name: 'Daniel Roe',
        avatar: {
          src: 'https://github.com/danielroe.png',
          alt: 'Daniel Roe'
        },
        to: 'https://github.com/danielroe',
        target: '_blank'
      }
    ]
  },
  {
    title: 'Nuxt 3.15',
    description: 'Nuxt 3.15 is out - with Vite 6, better HMR and faster performance!',
    date: '2024-12-24T00:00:00.000Z',
    image: 'https://nuxtjs.org.cn/assets/blog/v3.15.png',
    badge: 'v3.15.0',
    to: 'https://nuxtjs.org.cn/blog/v3-15',
    target: '_blank',
    authors: [
      {
        name: 'Daniel Roe',
        avatar: {
          src: 'https://github.com/danielroe.png',
          alt: 'Daniel Roe'
        },
        to: 'https://github.com/danielroe',
        target: '_blank'
      }
    ]
  }
]
</script>

<template>
  <UChangelogVersions :indicator="false">
    <UChangelogVersion
      v-for="version in versions"
      :key="version.title"
      v-bind="version"
      :badge="undefined"
      class="flex items-start"
      :ui="{
        container: 'max-w-lg me-0',
        indicator: 'sticky top-(--ui-header-height) pt-4 -mt-4 flex flex-col items-end'
      }"
    >
      <template #indicator>
        <UBadge :label="version.badge" variant="soft" />

        <span class="text-sm text-muted">{{
          new Date(version.date).toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
          })
        }}</span>
      </template>
    </UChangelogVersion>
  </UChangelogVersions>
</template>

API

属性

属性默认值类型
as

'div'

any

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

版本

ChangelogVersionProps[]

indicator

true

boolean

在左侧显示指示器栏。

指示器运动

true

boolean|SpringOptions

启用指示器栏上的滚动运动效果。{ damping:30, restDelta:0.001}

ui

{ root?: ClassNameValue; container?: ClassNameValue; indicator?: ClassNameValue; beam?: ClassNameValue;}

插槽

插槽类型
default

{}

indicator

{}

页头

{ version: ChangelogVersionProps;}

徽章

{ version: ChangelogVersionProps;}

日期

{ version: ChangelogVersionProps;}

title

{ version: ChangelogVersionProps;}

description

{ version: ChangelogVersionProps;}

图片

{ version: ChangelogVersionProps;}

主体

{ version: ChangelogVersionProps;}

页脚

{ version: ChangelogVersionProps;}

authors

{ version: ChangelogVersionProps;}

actions

{ version: ChangelogVersionProps;}

您可以在 ChangelogVersions 中使用 ChangelogVersion 组件的所有插槽，它们会自动转发，允许您在使用 versions 属性时自定义各个版本。
<template>
  <UChangelogVersions :versions="versions">
    <template #body="{ version }">
      <MDC v-if="version.content" :value="version.content" />
    </template>
  </UChangelogVersions>
</template>

主题

app.config.ts
export default defineAppConfig({
  ui: {
    changelogVersions: {
      slots: {
        root: 'relative',
        container: 'flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16',
        indicator: 'absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]',
        beam: 'absolute start-0 top-0 w-full bg-primary will-change-[height]'
      }
    }
  }
})
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: {
        changelogVersions: {
          slots: {
            root: 'relative',
            container: 'flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16',
            indicator: 'absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]',
            beam: 'absolute start-0 top-0 w-full bg-primary will-change-[height]'
          }
        }
      }
    })
  ]
})

更新日志

3173b— fix: proxySlots 响应性 (#4969)

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

ChangelogVersion

可自定义的变更日志文章。

Page

带有左右两列的页面网格布局。