ChangelogVersion
Um artigo personalizável para exibir em um changelog.
Uso
O componente ChangelogVersion oferece uma maneira flexível de exibir um elemento <article> com conteúdo personalizável, incluindo título, descrição, imagem, etc.
Use o componente
ChangelogVersions para exibir várias versões de changelog em uma linha do tempo, com uma barra indicadora à esquerda.Título
Use a prop title para exibir o título do ChangelogVersion.
Introducing Nitro UI v3
<template>
<NChangelogVersion title="Introducing Nitro UI v3" />
</template>
Descrição
Use a prop description para exibir a descrição do ChangelogVersion.
Introducing Nitro UI v3
Nitro UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility.
<template>
<NChangelogVersion
title="Introducing Nitro UI v3"
description="Nitro UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility."
/>
</template>
Dados
Use a prop date para exibir a data do ChangelogVersion.
A data é formatada automaticamente para o locale atual. Você pode passar um objeto
Date ou uma string.Introducing Nitro UI v3
Nitro UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility.
<template>
<NChangelogVersion
title="Introducing Nitro UI v3"
description="Nitro 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
Use a prop badge para exibir um Badge no ChangelogVersion.
Release
Introducing Nitro UI v3
Nitro UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility.
<template>
<NChangelogVersion
title="Introducing Nitro UI v3"
description="Nitro 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>
Você pode passar qualquer propriedade do componente Badge para personalizá-lo.
Release
Introducing Nitro UI v3
Nitro UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility.
<template>
<NChangelogVersion
title="Introducing Nitro UI v3"
description="Nitro 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>
Imagem
Use a prop image para exibir uma imagem no BlogPost.
Introducing Nitro UI v3
Nitro UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility.
<template>
<NChangelogVersion
title="Introducing Nitro UI v3"
description="Nitro 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>
Autores
Use a prop authors para exibir uma lista de User no ChangelogVersion como um array de objetos com as seguintes propriedades:
name?: stringdescription?: stringavatar?: Omit<AvatarProps, 'size'>chip?: boolean | Omit<ChipProps, 'size' | 'inset'>size?: UserProps['size']orientation?: UserProps['orientation']
Você pode passar qualquer propriedade do componente Link, como to, target, etc.
<script setup lang="ts">
import type { UserProps } from '@nitro/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>
<NChangelogVersion
title="Introducing Nitro UI v3"
description="Nitro 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 '@nitro/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>
<NChangelogVersion
title="Introducing Nitro UI v3"
description="Nitro 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>
Link
Você pode passar qualquer propriedade do componente <NuxtLink>, como to, target, rel, etc.
<template>
<NChangelogVersion
title="Introducing Nitro UI v3"
description="Nitro 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>
Indicador
Use a prop indicator para ocultar o ponto indicador à esquerda. O padrão é true.
Introducing Nitro UI v3
Nitro UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility.
<template>
<NChangelogVersion
title="Introducing Nitro UI v3"
description="Nitro 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>
Quando a prop
indicator é false, a data é exibida sobre o título.Exemplos
Com slot de corpo
Você pode usar o slot body para exibir conteúdo personalizado entre a imagem e os autores com:
- the MDC component from
@nuxtjs/mdcto display some markdown. - the ContentRenderer component from
@nuxt/contentto render the content of the page or list. - or use the
:n-changelog-versioncomponent directly in your content with markdown inside thebodyslot as Nitro UI provides pre-styled prose components.
Release
Introducing Nuxt UI v3
Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS support, and full Vue compatibility.
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.
API
Props
| 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; } |
Tema
app.config.ts
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: [
'has-focus-visible:ring-2 has-focus-visible:ring-primary rounded-xs',
'transition'
],
image: 'transform transition-transform duration-200 group-hover/changelog-version-image:scale-105 group-has-focus-visible/changelog-version-image:scale-105'
}
},
hidden: {
true: {
date: 'lg:hidden'
}
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/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: [
'has-focus-visible:ring-2 has-focus-visible:ring-primary rounded-xs',
'transition'
],
image: 'transform transition-transform duration-200 group-hover/changelog-version-image:scale-105 group-has-focus-visible/changelog-version-image:scale-105'
}
},
hidden: {
true: {
date: 'lg:hidden'
}
}
}
}
}
})
]
})
Changelog
No recent changes