ChangelogVersion 변경
Usage
ChangelogVersion 구성 요소는 제목, 설명, 이미지 등을 포함하여 사용자 정의 가능한 컨텐츠가 포함된 <article> 요소를 유연하게 표시할 수 있는 방법을 제공합니다.
제목
title prop 를 사용하여 ChangelogVersion 의 제목을 표시합니다.
Introducing Nuxt UI v3
<template>
<UChangelogVersion title="Introducing Nuxt UI v3" />
</template>Description
description prop를 사용하여 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 날짜
date prop 를 사용하여 ChangelogVersion 의 날짜를 표시합니다.
Date 객체 또는 문자열을 전달할 수 있습니다.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 prop를 사용하여 ChangelogVersion에 Badge를 표시합니다.
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>Badge 구성 요소의 모든 속성을 전달하여 사용자 정의할 수 있습니다.
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 이미지
image prop를 사용하여 BlogPost에 이미지를 표시합니다.
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>authors 작성자
authors prop을 사용하여 ChangelogVersion에 User 목록을 다음 속성을 가진 객체 배열로 표시합니다.
name?: string(-name?: string)description?: string(-description?: string)avatar?: Omit<AvatarProps, 'size'>(-avatar?: Omit<AvatarProps, 'size'>)chip?: boolean | Omit<ChipProps, 'size' | 'inset'>size?: UserProps['size']orientation?: UserProps['orientation']
Link 구성 요소에서 to, target 등의 속성을 전달할 수 있습니다.
<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>Link 링크
<NuxtLink> 구성 요소에서 to, target, rel 등의 속성을 전달할 수 있습니다.
<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>Indicator (### 표시기)
indicator 소품을 사용하여 왼쪽에 있는 지시자 점을 숨깁니다. 기본값은 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 prop이 false일 때, 날짜는 제목 위에 표시됩니다.examples 예제
본체 슬롯
body 슬롯을 사용하여 다음과 같은 기능을 사용하여 이미지와 작성자 간에 사용자 정의 콘텐츠를 표시할 수 있습니다.
- xMarkdown 구성 요소
@comark/vue에서 일부 Markdown을 표시합니다. - xContentRendererr 구성 요소는 페이지 또는 목록의 내용을 렌더링합니다.
- or는
body슬롯 내부의 markdown과 함께 콘텐츠에서 직접:u-changelog-version구성 요소를 사용하여 Nuxt UI가 사전 스타일의 산문 구성 요소를 제공합니다.- or use the:u-changelog-versioncomponent directly in your content with markdown inside thebodyslot as Nuxt UI provides pre-styled prose components.
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 파일
Props (### 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; } |
Theme 테마
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'
}
}
}
}
}
})
]
})