ChangelogVersions
Display a list of changelog versions in a timeline.
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>
<PChangelogVersions>
<PChangelogVersion
v-for="(version, index) in versions"
:key="index"
v-bind="version"
/>
</PChangelogVersions>
</template>
Versions
Use the versions prop as an array of objects with the properties of the ChangelogVersion component.
<script setup lang="ts">
import type { ChangelogVersionProps } from 'pohon-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>
<PChangelogVersions :versions="versions" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { ChangelogVersionProps } from 'pohon-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>
<PChangelogVersions :versions="versions" />
</template>Indicator
Use the indicator prop to hide the indicator bar on the left. Defaults to true.
<script setup lang="ts">
import type { ChangelogVersionProps } from 'pohon-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>
<PChangelogVersions :versions="versions" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { ChangelogVersionProps } from 'pohon-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>
<PChangelogVersions :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">
import type { ChangelogVersionProps } from 'pohon-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>
<PChangelogVersions indicator-motion :versions="versions" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { ChangelogVersionProps } from 'pohon-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>
<PChangelogVersions indicator-motion :versions="versions" />
</template>Examples
While these examples use Nuxt Content, the components can be integrated with any content management system.
Within a page
Use the ChangelogVersions component in a page to create a changelog page:
pages/changelog.vue
<script setup lang="ts">
const { data: versions } = await useAsyncData('versions', () => queryCollection('versions').all());
</script>
<template>
<PPage>
<PPageHero title="Changelog" />
<PPageBody>
<PChangelogVersions>
<PChangelogVersion
v-for="(version, index) in versions"
:key="index"
v-bind="version"
:to="version.path"
/>
</PChangelogVersions>
</PPageBody>
</PPage>
</template>
In this example, the
versions are fetched using queryCollection from the @nuxt/content module.The
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',
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>
<PChangelogVersions :indicator="false">
<PChangelogVersion
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>
<PBadge :label="version.badge" variant="soft" />
<span class="text-sm color-text-muted">{{
new Date(version.date).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
})
}}</span>
</template>
</PChangelogVersion>
</PChangelogVersions>
</template>With scroll container
Pass an object to the indicator prop to configure the scroll container. By default, the indicator tracks the window/page scroll (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"
>
<PChangelogVersions
v-if="scrollContainer"
:indicator="{ container: scrollContainer }"
/>
</div>
</template>
When using a custom
container, make sure the container element is mounted before PChangelogVersions.API
Props
| Prop | Default | Type |
|---|
Slots
| Slot | Type |
|---|
You can use all the slots of the
ChangelogVersion component inside ChangelogVersions, they are automatically forwarded so you can customize individual versions when using the versions prop.<template>
<PChangelogVersions :versions="versions">
<template #body="{ version }">
<Markdown :value="version.content" />
</template>
</PChangelogVersions>
</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 'pohon-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