ChangelogVersions

GitLab
Exiba uma lista de versões do changelog em uma linha do tempo.

Uso

O componente ChangelogVersions oferece um layout flexível para exibir uma lista de componentes ChangelogVersion usando o slot padrão ou a prop versions.

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

Versões

Use a prop versions como um array de objetos com as propriedades do componente 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 '@nitro/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>
  <NChangelogVersions :versions="versions" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChangelogVersionProps } from '@nitro/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>
  <NChangelogVersions :versions="versions" />
</template>

Indicador

Use a prop indicator para ocultar a barra indicadora à esquerda. O padrão é 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 '@nitro/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>
  <NChangelogVersions :indicator="false" :versions="versions" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChangelogVersionProps } from '@nitro/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>
  <NChangelogVersions :indicator="false" :versions="versions" />
</template>

Movimento do indicador

Use a prop indicator-motion para personalizar ou ocultar o efeito de movimento na barra indicadora. O padrão é true com { damping: 30, restDelta: 0.001 } opções de transição 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 '@nitro/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>
  <NChangelogVersions :versions="versions" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChangelogVersionProps } from '@nitro/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>
  <NChangelogVersions :versions="versions" />
</template>

Exemplos

Embora estes exemplos usem o Nuxt Content, os componentes podem ser integrados a qualquer sistema de gerenciamento de conteúdo.

Dentro de uma página

Use o componente ChangelogVersions em uma página para criar uma página de changelog:

pages/changelog.vue
<script setup lang="ts">
const { data: versions } = await useAsyncData('versions', () => queryCollection('versions').all())
</script>

<template>
  <NPage>
    <NPageHero title="Changelog" />

    <NPageBody>
      <NChangelogVersions>
        <NChangelogVersion
          v-for="(version, index) in versions"
          :key="index"
          v-bind="version"
          :to="version.path"
        />
      </NChangelogVersions>
    </NPageBody>
  </NPage>
</template>
Neste exemplo, as versions são buscadas usando queryCollection do módulo @nuxt/content.
A prop to é sobrescrita aqui, já que o @nuxt/content usa a propriedade path.

Com indicador fixo

Você pode usar a prop ui e os diferentes slots para tornar os indicadores fixos:

Apr 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

Mar 7, 2024

Nuxt 3.16

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

Daniel Roe

Dec 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

Com container de rolagem 4.4+

Passe um objeto para a prop indicator para configurar o container de rolagem. Por padrão, o indicador acompanha a rolagem da janela/página (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">
    <NChangelogVersions v-if="scrollContainer" :indicator="{ container: scrollContainer }" />
  </div>
</template>
Ao usar um container personalizado, certifique-se de que o elemento do container esteja montado antes do UChangelogVersions.

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

versions T[]
indicatortrueboolean | 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)

indicatorMotiontrueboolean | 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{}
Você pode usar todos os slots do componente ChangelogVersion dentro do ChangelogVersions; eles são repassados automaticamente, permitindo personalizar versões individuais ao usar a prop versions.
<template>
  <NChangelogVersions :versions="versions">
    <template #body="{ version }">
      <MDC v-if="version.content" :value="version.content" />
    </template>
  </NChangelogVersions>
</template>

Tema

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 '@nitro/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

No recent changes

ChangelogVersion

Um artigo personalizável para exibir em um changelog.

Page

Um layout em grade para as suas páginas com colunas à esquerda e à direita.