Changelogversión
Utilisation
Le composant ChangelogVersion fournit un moyen flexible d'afficher un élément <article> avec un contenu personnalisable, y compris le titre, la description, l'image, etc.
ChangelogVersions pour afficher plusieurs versions du journal des modifications dans une timeline avec une barre d'indicateur à gauche.titre
Utilisez la prop title pour afficher le titre du Changelog Version.
Introducing Nuxt UI v3
<template>
<UChangelogVersion title="Introducing Nuxt UI v3" />
</template>description of
Utilisez la prop description pour afficher la description du ChangelogVersion.
Introducing Nuxt UI v3
<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
/>
</template>Date
Utilisez la prop date pour afficher la date de la version du changement.
Date ou une chaîne.Introducing Nuxt UI v3
<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
date="2025-03-12"
/>
</template>badge référence
Utilisez la prop badge pour afficher un Badge sur le ChangelogVersion.
Introducing Nuxt UI v3
<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
date="2025-03-12"
badge="Release"
/>
</template>Vous pouvez passer n'importe quelle propriété du composant Badge pour le personnaliser.
Introducing Nuxt UI v3
<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
date="2025-03-12"
:badge="{
label: 'Release',
color: 'primary',
variant: 'outline'
}"
/>
</template>image à
Utilisez le prop image pour afficher une image dans le BlogPost.
@nuxt/image est installé, le composant <NuxtImg> sera utilisé à la place de la balise native img.Introducing Nuxt UI v3

<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
date="2025-03-12"
image="https://nuxt.com/assets/blog/nuxt-ui-v3.png"
/>
</template>Auteurs
Utilisez la prop authors pour afficher une liste de User dans le Changelog Version sous forme d'un tableau d'objets avec les propriétés suivantes:
- x
name?: stringx{lang="ts-type"} - x
description?: stringx{lang="ts-type"} - x
avatar?: Omit<AvatarProps, 'size'>x{lang="ts-type"} - x
chip?: boolean | Omit<ChipProps, 'size' | 'inset'>x{lang="ts-type"} - x
size?: UserProps['size']x{lang="ts-type"} orientation?: UserProps['orientation']x{lang="ts-type"}
Vous pouvez passer n'importe quelle propriété du composant Link telle que to, target, etc.
<script setup lang="ts">
import type { UserProps } from '@nuxt/ui'
const authors = ref<UserProps[]>([
{
name: 'Benjamin Canac',
description: '@benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy'
},
to: 'https://x.com/benjamincanac',
target: '_blank'
},
{
name: 'Sebastien Chopin',
description: '@atinux',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy'
},
to: 'https://x.com/atinux',
target: '_blank'
},
{
name: 'Hugo Richard',
description: '@hugorcd',
avatar: {
src: 'https://github.com/hugorcd.png',
loading: 'lazy'
},
to: 'https://x.com/hugorcd',
target: '_blank'
}
])
</script>
<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
date="2025-03-12"
image="https://nuxt.com/assets/blog/nuxt-ui-v3.png"
:authors="authors"
/>
</template><script setup lang="ts">
import { ref } from 'vue'
import type { UserProps } from '@nuxt/ui'
const authors = ref<UserProps[]>([
{
name: 'Benjamin Canac',
description: '@benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy'
},
to: 'https://x.com/benjamincanac',
target: '_blank'
},
{
name: 'Sebastien Chopin',
description: '@atinux',
avatar: {
src: 'https://github.com/atinux.png',
loading: 'lazy'
},
to: 'https://x.com/atinux',
target: '_blank'
},
{
name: 'Hugo Richard',
description: '@hugorcd',
avatar: {
src: 'https://github.com/hugorcd.png',
loading: 'lazy'
},
to: 'https://x.com/hugorcd',
target: '_blank'
}
])
</script>
<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
date="2025-03-12"
image="https://nuxt.com/assets/blog/nuxt-ui-v3.png"
:authors="authors"
/>
</template>Lien
Vous pouvez passer n'importe quelle propriété du composant <NuxtLink> telle que to, target, rel, etc.
<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
date="2025-03-12"
image="https://nuxt.com/assets/blog/nuxt-ui-v3.png"
to="https://nuxt.com/blog/nuxt-ui-v3"
target="_blank"
/>
</template>Indicateur
Utilisez la prop indicator pour masquer le point indicateur sur la gauche. Par défaut, true.
Introducing Nuxt UI v3

<template>
<UChangelogVersion
title="Introducing Nuxt UI v3"
description="Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
date="2025-03-12"
image="https://nuxt.com/assets/blog/nuxt-ui-v3.png"
:indicator="false"
/>
</template>indicator est false, la date sera affichée sur le titre.exemples
Avec slot pour le corps
You can use the body slot to display custom content between the image and the authors with:
- Le composant Markdown de
@comark/vuepour afficher une certaine démarche. - Le composant ContentRenderer de
@nuxt/contentpour rendre le contenu de la page ou de la liste. - or utiliser le composant
:u-changelog-versiondirectement dans votre contenu avec markdown à l'intérieur de l'emplacementbodycomme Nuxt UI fournit des composants de prose pré-stylisés.
Introducing Nuxt UI v3

We are thrilled to introduce Nuxt UI v3, a comprehensive redesign of our UI library that delivers significant improvements in accessibility, performance, and developer experience. This major update represents over 1,500 commits of dedicated work, collaboration, and innovation from our team and the community.
Read the blog post announcement: https://nuxt.com/blog/nuxt-ui-v3
🧩 Reka UI: A New Foundation
We've transitioned from Headless UI to Reka UI as our core component foundation, bringing:
- Expanded Component Library: Access to 55+ primitives, significantly expanding our component offerings
- Future-Proof Development: Benefit from Reka UI's growing popularity and continuous improvements
- First-Class Accessibility: Built-in accessibility features aligned with our commitment to inclusive design
🚀 Tailwind CSS Integration
Nuxt UI now leverages the latest Tailwind CSS, delivering:
- Exceptional Performance: Full builds up to 5× faster, with incremental builds over 100× faster
- Streamlined Toolchain: Built-in import handling, vendor prefixing, and syntax transforms with zero additional tooling
- CSS-First Configuration: Customize and extend the framework directly in CSS instead of JavaScript configuration
🎨 Tailwind Variants
We've adopted Tailwind Variants to power our design system, offering:
- Dynamic Styling: Create flexible component variants with a powerful, intuitive API
- Type Safety: Full TypeScript support with intelligent auto-completion
- Smart Conflict Resolution: Efficiently merge conflicting styles with predictable results
Migration from v2
We want to be transparent: migrating from Nuxt UI v2 to v3 requires significant effort. While we've maintained core concepts and components, Nuxt UI v3 has been rebuilt from the ground up to provide enhanced capabilities.
To upgrade your project:
- Read our detailed migration guide
- Review the new documentation and components before attempting to upgrade
- Report any issues on our GitHub repository
🙏 Acknowledgements
This release represents thousands of hours of work from our team and the community. We'd like to thank everyone who contributed to making Nuxt UI v3 a reality, especially @romhml, @sandros94, and @hywax for their tremendous work.
<script setup lang="ts">
import { Markdown } from '@comark/vue'
const content = `

We are thrilled to introduce Nuxt UI v3, a comprehensive redesign of our UI library that delivers significant improvements in accessibility, performance, and developer experience. This major update represents over 1,500 commits of dedicated work, collaboration, and innovation from our team and the community.
Read the blog post announcement: https://nuxt.com/blog/nuxt-ui-v3
**[Get started with Nuxt UI v3 →](https://ui3.nuxt.com/getting-started/installation/nuxt)**
### 🧩 Reka UI: A New Foundation
We've transitioned from [Headless UI](https://headlessui.com/) to [Reka UI](https://reka-ui.com/) as our core component foundation, bringing:
- **Expanded Component Library**: Access to 55+ primitives, significantly expanding our component offerings
- **Future-Proof Development**: Benefit from Reka UI's growing popularity and continuous improvements
- **First-Class Accessibility**: Built-in accessibility features aligned with our commitment to inclusive design
### 🚀 Tailwind CSS Integration
Nuxt UI now leverages the latest [Tailwind CSS](https://tailwindcss.com), delivering:
- **Exceptional Performance**: Full builds up to 5× faster, with incremental builds over 100× faster
- **Streamlined Toolchain**: Built-in import handling, vendor prefixing, and syntax transforms with zero additional tooling
- **CSS-First Configuration**: Customize and extend the framework directly in CSS instead of JavaScript configuration
### 🎨 Tailwind Variants
We've adopted [Tailwind Variants](https://www.tailwind-variants.org/) to power our design system, offering:
- **Dynamic Styling**: Create flexible component variants with a powerful, intuitive API
- **Type Safety**: Full TypeScript support with intelligent auto-completion
- **Smart Conflict Resolution**: Efficiently merge conflicting styles with predictable results
## Migration from v2
We want to be transparent: migrating from Nuxt UI v2 to v3 requires significant effort. While we've maintained core concepts and components, Nuxt UI v3 has been rebuilt from the ground up to provide enhanced capabilities.
To upgrade your project:
1. Read our detailed [migration guide](https://ui3.nuxt.com/getting-started/migration)
2. Review the new documentation and components before attempting to upgrade
3. Report any issues on our [GitHub repository](https://github.com/nuxt/ui/issues)
## 🙏 Acknowledgements
This release represents thousands of hours of work from our team and the community. We'd like to thank everyone who contributed to making Nuxt UI v3 a reality, especially @romhml, @sandros94, and @hywax for their tremendous work.
`
const version = {
title: 'Introducing Nuxt UI v3',
description:
'Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility.',
date: '2025-03-12T00:00:00.000Z',
badge: 'Release',
to: 'https://nuxt.com/blog/nuxt-ui-v3',
target: '_blank',
content,
authors: [
{
name: 'Benjamin Canac',
avatar: {
src: 'https://github.com/benjamincanac.png',
alt: 'Benjamin Canac',
loading: 'lazy' as const
},
to: 'https://github.com/benjamincanac',
target: '_blank'
}
]
}
</script>
<template>
<UChangelogVersion v-bind="version" :ui="{ container: 'max-w-lg' }" class="w-full">
<template #body>
<Markdown :value="version.content" />
</template>
</UChangelogVersion>
</template><script setup lang="ts">
import { provide } from 'vue'
import { Markdown } from '@comark/vue'
const content = `

We are thrilled to introduce Nuxt UI v3, a comprehensive redesign of our UI library that delivers significant improvements in accessibility, performance, and developer experience. This major update represents over 1,500 commits of dedicated work, collaboration, and innovation from our team and the community.
Read the blog post announcement: https://nuxt.com/blog/nuxt-ui-v3
**[Get started with Nuxt UI v3 →](https://ui3.nuxt.com/getting-started/installation/nuxt)**
### 🧩 Reka UI: A New Foundation
We've transitioned from [Headless UI](https://headlessui.com/) to [Reka UI](https://reka-ui.com/) as our core component foundation, bringing:
- **Expanded Component Library**: Access to 55+ primitives, significantly expanding our component offerings
- **Future-Proof Development**: Benefit from Reka UI's growing popularity and continuous improvements
- **First-Class Accessibility**: Built-in accessibility features aligned with our commitment to inclusive design
### 🚀 Tailwind CSS Integration
Nuxt UI now leverages the latest [Tailwind CSS](https://tailwindcss.com), delivering:
- **Exceptional Performance**: Full builds up to 5× faster, with incremental builds over 100× faster
- **Streamlined Toolchain**: Built-in import handling, vendor prefixing, and syntax transforms with zero additional tooling
- **CSS-First Configuration**: Customize and extend the framework directly in CSS instead of JavaScript configuration
### 🎨 Tailwind Variants
We've adopted [Tailwind Variants](https://www.tailwind-variants.org/) to power our design system, offering:
- **Dynamic Styling**: Create flexible component variants with a powerful, intuitive API
- **Type Safety**: Full TypeScript support with intelligent auto-completion
- **Smart Conflict Resolution**: Efficiently merge conflicting styles with predictable results
## Migration from v2
We want to be transparent: migrating from Nuxt UI v2 to v3 requires significant effort. While we've maintained core concepts and components, Nuxt UI v3 has been rebuilt from the ground up to provide enhanced capabilities.
To upgrade your project:
1. Read our detailed [migration guide](https://ui3.nuxt.com/getting-started/migration)
2. Review the new documentation and components before attempting to upgrade
3. Report any issues on our [GitHub repository](https://github.com/nuxt/ui/issues)
## 🙏 Acknowledgements
This release represents thousands of hours of work from our team and the community. We'd like to thank everyone who contributed to making Nuxt UI v3 a reality, especially @romhml, @sandros94, and @hywax for their tremendous work.
`
const version = {
title: 'Introducing Nuxt UI v3',
description:
'Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility.',
date: '2025-03-12T00:00:00.000Z',
badge: 'Release',
to: 'https://nuxt.com/blog/nuxt-ui-v3',
target: '_blank',
content,
authors: [
{
name: 'Benjamin Canac',
avatar: {
src: 'https://github.com/benjamincanac.png',
alt: 'Benjamin Canac',
loading: 'lazy' as const
},
to: 'https://github.com/benjamincanac',
target: '_blank'
}
]
}
</script>
<template>
<UChangelogVersion v-bind="version" :ui="{ container: 'max-w-lg' }" class="w-full">
<template #body>
<Markdown :value="version.content" />
</template>
</UChangelogVersion>
</template>API équipement
Props équipement
| Prop | Default | Type |
|---|---|---|
as | 'article' | anyThe element or component this component should render as. |
title | string | |
description | string | |
date | string | DateThe date of the changelog version. Can be a string or a Date object. | |
badge | string | BadgePropsDisplay a badge on the changelog version.
Can be a string or an object.
| |
authors | UserProps[]The authors of the changelog version. | |
image | string | Partial<ImgHTMLAttributes> & { [key: string]: any; }The image of the changelog version. Can be a string or an object. | |
indicator | true | boolean Display an indicator dot on the left. |
to | string | it | et | |
target | null | "_blank" | "_parent" | "_self" | "_top" | string | |
ui | { root?: SlotClass; container?: SlotClass; header?: SlotClass; meta?: SlotClass; date?: SlotClass; badge?: SlotClass; title?: SlotClass; description?: SlotClass; imageWrapper?: SlotClass; image?: SlotClass; authors?: SlotClass; footer?: SlotClass; indicator?: SlotClass; dot?: SlotClass; dotInner?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
header | {} |
badge | { ui: object; } |
date | {} |
title | {} |
description | {} |
image | { ui: object; } |
body | {} |
footer | {} |
authors | {} |
actions | {} |
indicator | { ui: object; } |
Thème
export default defineAppConfig({
ui: {
changelogVersion: {
slots: {
root: 'relative',
container: 'flex flex-col mx-auto max-w-2xl',
header: '',
meta: 'flex items-center gap-3 mb-2',
date: 'text-sm/6 text-toned truncate',
badge: '',
title: 'relative text-xl text-pretty font-semibold text-highlighted',
description: 'text-base text-pretty text-muted mt-1',
imageWrapper: 'relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image',
image: 'object-cover object-top w-full h-full',
authors: 'flex flex-wrap gap-x-4 gap-y-1.5',
footer: 'border-t border-default pt-5 flex items-center justify-between',
indicator: 'absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0',
dot: 'size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1',
dotInner: 'size-2 rounded-full bg-primary'
},
variants: {
body: {
false: {
footer: 'mt-5'
}
},
badge: {
false: {
meta: 'lg:hidden'
}
},
to: {
true: {
title: [
'outline-primary/25 has-focus-visible:outline-3 rounded-xs',
'transition'
],
image: 'transform transition-transform ease-out motion-reduce:transition-none group-hover/changelog-version-image:scale-105 group-has-focus-visible/changelog-version-image:scale-105'
}
},
hidden: {
true: {
date: 'lg:hidden'
}
}
}
}
}
})import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
changelogVersion: {
slots: {
root: 'relative',
container: 'flex flex-col mx-auto max-w-2xl',
header: '',
meta: 'flex items-center gap-3 mb-2',
date: 'text-sm/6 text-toned truncate',
badge: '',
title: 'relative text-xl text-pretty font-semibold text-highlighted',
description: 'text-base text-pretty text-muted mt-1',
imageWrapper: 'relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image',
image: 'object-cover object-top w-full h-full',
authors: 'flex flex-wrap gap-x-4 gap-y-1.5',
footer: 'border-t border-default pt-5 flex items-center justify-between',
indicator: 'absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0',
dot: 'size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1',
dotInner: 'size-2 rounded-full bg-primary'
},
variants: {
body: {
false: {
footer: 'mt-5'
}
},
badge: {
false: {
meta: 'lg:hidden'
}
},
to: {
true: {
title: [
'outline-primary/25 has-focus-visible:outline-3 rounded-xs',
'transition'
],
image: 'transform transition-transform ease-out motion-reduce:transition-none group-hover/changelog-version-image:scale-105 group-has-focus-visible/changelog-version-image:scale-105'
}
},
hidden: {
true: {
date: 'lg:hidden'
}
}
}
}
}
})
]
})