ChangelogVersions^专业版

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

用法

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

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

版本

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

2025年4月27日

Nuxt 3.17

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

2025年3月7日

Nuxt 3.16

Nuxt 3.16 发布了——功能丰富且性能改进显著！

2024年12月24日

Nuxt 3.15

Nuxt 3.15 发布了——包含 Vite 6、更好的 HMR 和更快的性能！

<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 prop 可以隐藏左侧的指示器条。默认为 true。

指示器

2025年4月27日

Nuxt 3.17

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

2025年3月7日

Nuxt 3.16

Nuxt 3.16 发布了——功能丰富且性能改进显著！

2024年12月24日

Nuxt 3.15

Nuxt 3.15 发布了——包含 Vite 6、更好的 HMR 和更快的性能！

<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 prop 可以自定义或隐藏指示器条上的运动效果。默认为 true，并带有 { damping: 30, restDelta: 0.001 }弹簧过渡选项.

indicatorMotion

2025年4月27日

Nuxt 3.17

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

2025年3月7日

Nuxt 3.16

Nuxt 3.16 发布了——功能丰富且性能改进显著！

2024年12月24日

Nuxt 3.15

Nuxt 3.15 发布了——包含 Vite 6、更好的 HMR 和更快的性能！

<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 prop 被覆盖。

带粘性指示器

您可以使用 ui prop 和不同的插槽使指示器保持粘性

<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 mr-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` 此组件应渲染为的元素或组件。
`versions`		`ChangelogVersionProps[]`
`指示器`	`true`	`boolean` 在左侧显示指示器条。
`indicatorMotion`	`true`	`boolean \| SpringOptions` 启用指示器条上的滚动运动效果。`{ damping: 30, restDelta: 0.001 }`
`ui`		`{ root?: ClassNameValue; container?: ClassNameValue; indicator?: ClassNameValue; beam?: ClassNameValue; }`

插槽

插槽	类型
`default`	`{}`
`指示器`	`{}`
`页头`	`{ version: ChangelogVersionProps; }`
`徽章`	`{ version: ChangelogVersionProps; }`
`日期`	`{ version: ChangelogVersionProps; }`
`title`	`{ version: ChangelogVersionProps; }`
`description`	`{ version: ChangelogVersionProps; }`
`图片`	`{ version: ChangelogVersionProps; }`
`主体`	`{ version: ChangelogVersionProps; }`
`页脚`	`{ version: ChangelogVersionProps; }`
`authors`	`{ version: ChangelogVersionProps; }`
`actions`	`{ version: ChangelogVersionProps; }`

您可以使用 ChangelogVersion 组件的所有插槽在 ChangelogVersions 中，它们会自动转发，允许您在使用 versions prop 时自定义各个版本。

<template>
  <UChangelogVersions :versions="versions">
    <template #body="{ version }">
      <MDC v-if="version.content" :value="version.content" />
    </template>
  </UChangelogVersions>
</template>

主题

app.config.ts

export default defineAppConfig({
  uiPro: {
    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 left-32 h-full w-px bg-border -ml-[8.5px]',
        beam: 'absolute left-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({
      uiPro: {
        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 left-32 h-full w-px bg-border -ml-[8.5px]',
            beam: 'absolute left-0 top-0 w-full bg-primary will-change-[height]'
          }
        }
      }
    })
  ]
})

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: {
        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 left-32 h-full w-px bg-border -ml-[8.5px]',
            beam: 'absolute left-0 top-0 w-full bg-primary will-change-[height]'
          }
        }
      }
    })
  ]
})

ChangelogVersion

可自定义的变更日志文章，用于在变更日志中显示。

ChatMessage

显示带有图标、头像和操作的聊天消息。

ChangelogVersions专业版

Nuxt 3.17

Nuxt 3.16

Nuxt 3.15

Nuxt 3.17

Nuxt 3.16

Nuxt 3.15

Nuxt 3.17

Nuxt 3.16

Nuxt 3.15

ChangelogVersions^专业版