Changelogversión

Un artículo personalizable para mostrar en un changelog.

xph0000xUso

El componente ChangelogVersion proporciona una forma flexible de mostrar un elemento <article> con contenido personalizable que incluye título, descripción, imagen, etc.

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.
Introducing Nuxt UI v3
Benjamin Canac

Benjamin Canac

@benjamincanac

Sebastien Chopin

Sebastien Chopin

@atinux

Hugo Richard

Hugo Richard

@hugorcd

Utilice el componente ChangelogVersions para mostrar varias versiones del registro de cambios en una línea de tiempo con una barra indicadora a la izquierda.

Nombre

Utilice el prop title para mostrar el título de la versión de cambio.

Introducing Nuxt UI v3

<template>
  <UChangelogVersion title="Introducing Nuxt UI v3" />
</template>

xph07xDescripción

Utilice el prop description para mostrar la descripción de la versión del registro de cambios.

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.
<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>

Fecha

Utilice el prop date para mostrar la fecha de la versión del registro de cambios.

La fecha se formatea automáticamente con el locale](/docs/getting-started/integrations/i18n/nuxt#locale). Puede pasar un objeto Date o una cadena.

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.
<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 (Edición española)

Utilice el prop badge para mostrar un Badge en el ChangelogVersion.

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.
<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>

Puede pasar cualquier propiedad del componente Badge para personalizarlo.

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.
<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>

Imágenes

Utilice el prop image para mostrar una imagen en el BlogPost.

Si @nuxt/image está instalado, se utilizará el componente <NuxtImg> en lugar de la etiqueta nativa img.

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.
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>

Artículos

Utilice la prop authors para mostrar una lista de User en el Changelog Version como una matriz de objetos con las siguientes propiedades:

  • xname?: stringx{lang="ts-type"} (Edición española)
  • xdescription?: stringx{lang="ts-type"} (Edición española)
  • xavatar?: Omit<AvatarProps, 'size'>xx{lang="ts-type"}
  • xchip?: boolean | Omit<ChipProps, 'size' | 'inset'>x{lang="ts-type"} (Edición española)
  • xsize?: UserProps['size']x{lang="ts-type"}
  • xorientation?: UserProps['orientation']xx{lang="ts-type"}

Puede pasar cualquier propiedad del componente Link como to, target, etc.

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.
Introducing Nuxt UI v3
Benjamin Canac

Benjamin Canac

@benjamincanac

Sebastien Chopin

Sebastien Chopin

@atinux

Hugo Richard

Hugo Richard

@hugorcd

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

Enlace

Puede pasar cualquier propiedad del componente <NuxtLink> como to, target, rel, etc.

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.
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"
    to="https://nuxt.com/blog/nuxt-ui-v3"
    target="_blank"
  />
</template>

Indicador

Utilice el prop indicator para ocultar el punto indicador de la izquierda.

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.
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>
Cuando el prop indicator es false, la fecha se mostrará sobre el título.

Ejemplos

Con ranura para el cuerpo

Puede utilizar la ranura body para mostrar contenido personalizado entre la imagen y los autores con:

  • El componente Markdown de @comark/vue para mostrar algunos descuentos.
  • El componente ContentRenderer de @nuxt/content para renderizar el contenido de la página o lista.
  • o utilice el componente :u-changelog-version directamente en su contenido con una reducción de precios dentro de la ranura body, ya que la interfaz de usuario de Nuxt proporciona componentes de prosa prediseñados.
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

Get started with 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:

  1. Read our detailed migration guide
  2. Review the new documentation and components before attempting to upgrade
  3. 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.

Benjamin Canac

Benjamin Canac

<script setup lang="ts">
import { Markdown } from '@comark/vue'

const content = `
![Nuxt UI v3](https://nuxt.com/assets/blog/nuxt-ui-v3.png)

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 = `
![Nuxt UI v3](https://nuxt.com/assets/blog/nuxt-ui-v3.png)

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 (Edición española)

Props (Edición española)

Prop Default Type
as
'article'
any

The element or component this component should render as.

title
string
description
string
date
string | Date

The date of the changelog version. Can be a string or a Date object.

badge
string | BadgeProps

Display a badge on the changelog version. Can be a string or an object. { color: 'neutral', variant: 'solid' }

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 en línea

Slot Type
header
{}
badge
{ ui: object; }
date
{}
title
{}
description
{}
image
{ ui: object; }
body
{}
footer
{}
authors
{}
actions
{}
indicator
{ ui: object; }

Temas

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: [
              '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'
          }
        }
      }
    }
  }
})
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: {
        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'
              }
            }
          }
        }
      }
    })
  ]
})

Changelog (Edición española)

No recent changes