更新日志版本列表

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

用法

ChangelogVersions 组件提供了一个灵活的布局，用于通过默认插槽或 versions 属性来展示 ChangelogVersion 组件列表。

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

Versions

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

Nuxt 3.17

Nuxt 3.17 已发布 - 带来了异步数据层的重大重构、一个新的内置组件、更好的警告信息以及性能提升！
Nuxt 3.17

Nuxt 3.16

Nuxt 3.16 已发布 - 包含了大量功能和性能改进！
Nuxt 3.16

Nuxt 3.15

Nuxt 3.15 已发布 - 引入了 Vite 6，增强了 HMR 并提升了运行速度！
Nuxt 3.15
<script setup lang="ts">
import type { ChangelogVersionProps } from '@nuxt/ui'

const versions = ref<ChangelogVersionProps[]>([
  {
    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>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChangelogVersionProps } from '@nuxt/ui'

const versions = ref<ChangelogVersionProps[]>([
  {
    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 已发布 - 包含了大量功能和性能改进！
Nuxt 3.16

Nuxt 3.15

Nuxt 3.15 已发布 - 引入了 Vite 6，增强了 HMR 并提升了运行速度！
Nuxt 3.15
<script setup lang="ts">
import type { ChangelogVersionProps } from '@nuxt/ui'

const versions = ref<ChangelogVersionProps[]>([
  {
    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>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChangelogVersionProps } from '@nuxt/ui'

const versions = ref<ChangelogVersionProps[]>([
  {
    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

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

Nuxt 3.17

Nuxt 3.17 已发布 - 带来了异步数据层的重大重构、一个新的内置组件、更好的警告信息以及性能提升！
Nuxt 3.17

Nuxt 3.16

Nuxt 3.16 已发布 - 包含了大量功能和性能改进！
Nuxt 3.16

Nuxt 3.15

Nuxt 3.15 已发布 - 引入了 Vite 6，增强了 HMR 并提升了运行速度！
Nuxt 3.15
<script setup lang="ts">
import type { ChangelogVersionProps } from '@nuxt/ui'

const versions = ref<ChangelogVersionProps[]>([
  {
    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>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChangelogVersionProps } from '@nuxt/ui'

const versions = ref<ChangelogVersionProps[]>([
  {
    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 已发布 - 包含了大量功能和性能改进！
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',
          loading: 'lazy' as const
        },
        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',
          loading: 'lazy' as const
        },
        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',
          loading: 'lazy' as const
        },
        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>

带滚动容器 4.4+

将对象传递给 indicator 属性以配置滚动容器。默认情况下，指示器会追踪窗口/页面的滚动（https://motion.net.cn/docs/vue-use-scroll#page-scroll）。

<script setup lang="ts">
const scrollContainer = ref<HTMLElement>()
</script>

<template>
  <div ref="scrollContainer" class="max-h-96 overflow-y-auto">
    <UChangelogVersions v-if="scrollContainer" :indicator="{ container: scrollContainer }" />
  </div>
</template>
当使用自定义 container 时，请确保容器元素在 UChangelogVersions 之前完成挂载。

API

属性

属性默认值类型
as'div'any

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

versionsT[]
indicatortrueboolean | UseScrollOptions

在左侧显示指示条。默认情况下，指示器将追踪页面的滚动。（https://motion.net.cn/docs/vue-use-scroll#page-scroll）

indicatorMotiontrueboolean | SpringOptions

启用指示条的滚动动画效果。{ damping: 30, restDelta: 0.001 }

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

插槽

插槽类型
页头{ version: T; }
徽章{ ui: object; } & { version: T; }
日期{ version: T; }
title{ version: T; }
description{ version: T; }
图片{ ui: object; } & { version: T; }
主体{ version: T; }
页脚{ version: T; }
authors{ version: T; }
actions{ version: T; }
indicator{ ui: object; } & { version: T; }
default{}
您可以在 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]'
          }
        }
      }
    })
  ]
})

更新日志

暂无近期更新

ChangelogVersion

可自定义的更新日志条目展示组件。

Page

用于页面左右双栏布局的网格容器。