Changées versions

GitHub à
Afficher une liste des versions du changelog dans une timeline.

Utilisation

Le composant ChangelogVersions fournit une disposition flexible pour afficher une liste de composants ChangelogVersion en utilisant soit l'emplacement par défaut, soit la prop versions.

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

Versions

Utilisez la prop versions comme un tableau d'objets avec les propriétés du composant ChangelogVersion.

Nuxt 3.17

Nuxt 3.17 is out - bringing a major reworking of the async data layer, a new built-in component, better warnings, and performance improvements!
Nuxt 3.17

Nuxt 3.16

Nuxt 3.16 is out - packed with features and performance improvements!
Nuxt 3.16

Nuxt 3.15

Nuxt 3.15 is out - with Vite 6, better HMR and faster performance!
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://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>

indicateur

Utilisez la prop indicator pour masquer la barre d'indicateur sur la gauche. Par défaut, true.

Nuxt 3.17

Nuxt 3.17 is out - bringing a major reworking of the async data layer, a new built-in component, better warnings, and performance improvements!
Nuxt 3.17

Nuxt 3.16

Nuxt 3.16 is out - packed with features and performance improvements!
Nuxt 3.16

Nuxt 3.15

Nuxt 3.15 is out - with Vite 6, better HMR and faster performance!
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://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>

Indicateur de mouvement

Utilisez la prop indicator-motion pour personnaliser ou masquer l'effet de mouvement sur la barre d'indicateur. Par défaut, true avec options de transition { damping: 30, restDelta: 0.001 } spring .

Nuxt 3.17

Nuxt 3.17 is out - bringing a major reworking of the async data layer, a new built-in component, better warnings, and performance improvements!
Nuxt 3.17

Nuxt 3.16

Nuxt 3.16 is out - packed with features and performance improvements!
Nuxt 3.16

Nuxt 3.15

Nuxt 3.15 is out - with Vite 6, better HMR and faster performance!
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://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>

Exemples

Bien que ces exemples utilisent Nuxt Content, les composants peuvent être intégrés à n'importe quel système de gestion de contenu.

Dans une page

Utilisez le composant ChangelogVersions dans une page pour créer une page de journal des changements:

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>
Dans cet exemple, les versions sont récupérés à l'aide de queryCollection à partir du module @nuxt/content.
La prop to est remplacée ici puisque @nuxt/content utilise la propriété path.

Avec indicateur collant

Vous pouvez utiliser le prop ui et les différentes fentes pour rendre les indicateurs collants:

v3.17.0Apr 27, 2025

Nuxt 3.17

Nuxt 3.17 is out - bringing a major reworking of the async data layer, a new built-in component, better warnings, and performance improvements!
Nuxt 3.17
Daniel Roe

Daniel Roe

v3.16.0Mar 7, 2024

Nuxt 3.16

Nuxt 3.16 is out - packed with features and performance improvements!
Nuxt 3.16
Daniel Roe

Daniel Roe

v3.15.0Dec 24, 2024

Nuxt 3.15

Nuxt 3.15 is out - with Vite 6, better HMR and faster performance!
Nuxt 3.15
Daniel Roe

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://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>

With conteneur de défilement: badge{label="4.4+" class="align-text-top"}

Passez un objet à la prop indicator pour configurer le conteneur de défilement. Par défaut, l'indicateur suit le défilement de la fenêtre/page (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>
Lorsque vous utilisez un container personnalisé, assurez-vous que l'élément conteneur est monté avant le UChangelogVersions.

API

Props

Prop Default Type
as
'div'
any

The 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. { damping: 30, restDelta: 0.001 }

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

Slots

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
{}
Vous pouvez utiliser tous les emplacements du composant ChangelogVersion dans ChangelogVersions, ils sont automatiquement transférés afin que vous puissiez personnaliser les versions individuelles lors de l'utilisation du prop versions.
<template>
  <UChangelogVersions :versions="versions">
    <template #body="{ version }">
      <Markdown :value="version.content" />
    </template>
  </UChangelogVersions>
</template>

Thème

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 écrit

No recent changes

ChangelogVersion

A customizable article to display in a changelog.

Page

A grid layout for your pages with left and right columns.