ChangelogVersions
Usage
The ChangelogVersions component provides a flexible layout to display a list of ChangelogVersion components using either the default slot or the versions prop.
<template>
<UChangelogVersions>
<UChangelogVersion
v-for="(version, index) in versions"
:key="index"
v-bind="post"
/>
</UChangelogVersions>
</template>
Versions
Use the versions prop as an array of objects with the properties of the ChangelogVersion component.
<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://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
Use the indicator prop to hide the indicator bar on the left. Defaults to true.
<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://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
Use the indicator-motion prop to customize or hide the motion effect on the indicator bar. Defaults to true with { damping: 30, restDelta: 0.001 } spring transition options.
<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://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>
Examples
Within a page
Use the ChangelogVersions component in a page to create a changelog page:
<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 are fetched using queryCollection from the @nuxt/content module.to prop is overridden here since @nuxt/content uses the path property.With sticky indicator
You can use the ui prop and the different slots to make the indicators sticky:
<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'
},
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'
},
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'
},
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
Props
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
versions |
| |
indicator |
|
Display an indicator bar on the left. |
indicatorMotion |
|
Enable scrolling motion effect on the indicator bar.
|
ui |
|
Slots
| Slot | Type |
|---|---|
header |
|
badge |
|
date |
|
title |
|
description |
|
image |
|
body |
|
footer |
|
authors |
|
actions |
|
indicator |
|
default |
|
ChangelogVersion component inside ChangelogVersions, they are automatically forwarded allowing you to customize individual versions when using the versions prop.<template>
<UChangelogVersions :versions="versions">
<template #body="{ version }">
<MDC v-if="version.content" :value="version.content" />
</template>
</UChangelogVersions>
</template>
Theme
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]'
}
}
}
})
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]'
}
}
}
})
]
})