ChangelogVersions
タイムラインに変更履歴バージョンのリストを表示します。
使用法
ChangelogVersionsコンポーネントは、ChangelogVersionコンポーネントのリストを、デフォルトスロットまたはversions propを使用して表示する柔軟なレイアウトを提供します。
<template>
<UChangelogVersions>
<UChangelogVersion
v-for="(version, index) in versions"
:key="index"
v-bind="version"
/>
</UChangelogVersions>
</template>
Versions
versionsプロパティをChangelogVersionコンポーネントのプロパティを持つオブジェクトの配列として使用します。
<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://nuxt.com/assets/blog/v3.17.png',
date: '2025-04-27',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.16.png',
date: '2025-03-07',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.15.png',
date: '2024-12-24',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.17.png',
date: '2025-04-27',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.16.png',
date: '2025-03-07',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.15.png',
date: '2024-12-24',
to: 'https://nuxt.com/blog/v3-15',
target: '_blank',
ui: {
container: 'max-w-lg'
}
}
])
</script>
<template>
<UChangelogVersions :versions="versions" />
</template>Indicator
indicatorプロパティを使用して左側のインディケータバーを非表示にします。デフォルトはtrueです。
<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://nuxt.com/assets/blog/v3.17.png',
date: '2025-04-27',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.16.png',
date: '2025-03-07',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.15.png',
date: '2024-12-24',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.17.png',
date: '2025-04-27',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.16.png',
date: '2025-03-07',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.15.png',
date: '2024-12-24',
to: 'https://nuxt.com/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 } spring遷移オプションです。
<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://nuxt.com/assets/blog/v3.17.png',
date: '2025-04-27',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.16.png',
date: '2025-03-07',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.15.png',
date: '2024-12-24',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.17.png',
date: '2025-04-27',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.16.png',
date: '2025-03-07',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.15.png',
date: '2024-12-24',
to: 'https://nuxt.com/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>
この例では、
@nuxt/contentモジュールのqueryCollectionを使用してversionsをフェッチします。@nuxt/contentはpathプロパティを使用するため、toプロパティはオーバーライドされます。粘着性インジケータ付き
uiプロパティと異なるスロットを使用して、インジケータをスティッキーにすることができます。
v3.17.0Apr 27, 2025
v3.16.0Mar 7, 2024
v3.15.0Dec 24, 2024
<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://nuxt.com/assets/blog/v3.17.png',
badge: 'v3.17.0',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.16.png',
badge: 'v3.16.0',
to: 'https://nuxt.com/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://nuxt.com/assets/blog/v3.15.png',
badge: 'v3.15.0',
to: 'https://nuxt.com/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>スクロールコンテナ付きbadge{label="4.4+" class="align-text-top"}
indicatorプロパティにオブジェクトを渡してスクロールコンテナを設定します。デフォルトでは、インジケータはウィンドウ/ページスクロールを追跡しますhttps//motion.dev/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
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
versions | T[] | |
indicator | true | boolean | UseScrollOptions Display an indicator bar on the left. By default, the indicator will track the scroll of the page. (https://motion.dev/docs/vue-use-scroll#page-scroll) |
indicatorMotion | true | boolean | SpringOptions Enable scrolling motion effect on the indicator bar.
|
ui | { root?: SlotClass; container?: SlotClass; indicator?: SlotClass; beam?: SlotClass; } |
スロット
| Slot | Type |
|---|---|
header | { version: T; } |
badge | { ui: object; } & { version: T; } |
date | { version: T; } |
title | { version: T; } |
description | { version: T; } |
image | { ui: object; } & { version: T; } |
body | { version: T; } |
footer | { version: T; } |
authors | { version: T; } |
actions | { version: T; } |
indicator | { ui: object; } & { version: T; } |
default | {} |
ChangelogVersionコンポーネントのすべてのスロットはChangelogVersions内で使用できます。これらのスロットは自動的に転送されるので、versions propを使用する際に個々のバージョンをカスタマイズできます。<template>
<UChangelogVersions :versions="versions">
<template #body="{ version }">
<Markdown :value="version.content" />
</template>
</UChangelogVersions>
</template>
Theme
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]'
}
}
}
})
]
})Changelog
No recent changes