ChangelogVersions 변경하기

일정에 변경 로그 버전 목록을 표시합니다.

Usage

ChangelogVersion](/docs/components/changelog-version) 구성 요소 목록을 기본 슬롯이나 versions prop을 사용하여 표시할 수 있는 유연한 레이아웃을 제공합니다.

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

버전

versions prop을 ChangelogVersion 구성 요소의 속성이 있는 오브젝트 배열로 사용합니다.

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!

Mar 7, 2025

Nuxt 3.16

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

Dec 24, 2024

Nuxt 3.15

Nuxt 3.15 is out - with Vite 6, better HMR and faster performance!

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

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

Indicator (### 표시기)

indicator 소품을 사용하여 왼쪽의 지시자 막대를 숨깁니다. 기본값은 true입니다.

indicator

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!

Mar 7, 2025

Nuxt 3.16

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

Dec 24, 2024

Nuxt 3.15

Nuxt 3.15 is out - with Vite 6, better HMR and faster performance!

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

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

표시기 동작

indicator-motion 소품을 사용하여 표시기 막대의 모션 효과를 사용자 정의하거나 숨길 수 있습니다. 기본적으로 { damping: 30, restDelta: 0.001 } spring transition options가 있는 true입니다.

indicatorMotion

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!

Mar 7, 2025

Nuxt 3.16

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

Dec 24, 2024

Nuxt 3.15

Nuxt 3.15 is out - with Vite 6, better HMR and faster performance!

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

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

examples 예제

이러한 예제에서는 Nuxt Content를 사용하지만 구성 요소는 모든 콘텐츠 관리 시스템과 통합 할 수 있습니다.

페이지 안에

페이지에서 ChangelogVersions 구성 요소를 사용하여 변경 로그 페이지를 생성합니다.

pages/changelog.vue

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

<template>
  <UPage>
    <UPageHero title="Changelog" />

    <UPageBody>
      <UChangelogVersions>
        <UChangelogVersion
          v-for="(version, index) in versions"
          :key="index"
          v-bind="version"
          :to="version.path"
        />
      </UChangelogVersions>
    </UPageBody>
  </UPage>
</template>

이 예제에서는 versions가 @nuxt/content 모듈에서 queryCollection를 사용하여 인출됩니다.

@nuxt/content가 path 속성을 사용하기 때문에 to prop은 여기서 재정의됩니다.

Sticky 표시기

ui prop과 다른 슬롯을 사용하여 표시기를 고정시킬 수 있습니다.

v3.17.0Apr 27, 2025

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!

Daniel Roe

v3.16.0Mar 7, 2024

Mar 7, 2024

Nuxt 3.16

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

Daniel Roe

v3.15.0Dec 24, 2024

Dec 24, 2024

Nuxt 3.15

Nuxt 3.15 is out - with Vite 6, better HMR and faster performance!

Daniel Roe

<script setup lang="ts">
const versions = [
  {
    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!',
    date: '2025-04-27T00:00:00.000Z',
    image: 'https://nuxt.com/assets/blog/v3.17.png',
    badge: 'v3.17.0',
    to: 'https://nuxt.com/blog/nuxt-3-17',
    target: '_blank',
    authors: [
      {
        name: 'Daniel Roe',
        avatar: {
          src: 'https://github.com/danielroe.png',
          alt: 'Daniel Roe',
          loading: 'lazy' as const
        },
        to: 'https://github.com/danielroe',
        target: '_blank'
      }
    ]
  },
  {
    title: 'Nuxt 3.16',
    description: 'Nuxt 3.16 is out - packed with features and performance improvements!',
    date: '2024-03-07T00:00:00.000Z',
    image: 'https://nuxt.com/assets/blog/v3.16.png',
    badge: 'v3.16.0',
    to: 'https://nuxt.com/blog/v3-16',
    target: '_blank',
    authors: [
      {
        name: 'Daniel Roe',
        avatar: {
          src: 'https://github.com/danielroe.png',
          alt: 'Daniel Roe',
          loading: 'lazy' as const
        },
        to: 'https://github.com/danielroe',
        target: '_blank'
      }
    ]
  },
  {
    title: 'Nuxt 3.15',
    description: 'Nuxt 3.15 is out - with Vite 6, better HMR and faster performance!',
    date: '2024-12-24T00:00:00.000Z',
    image: 'https://nuxt.com/assets/blog/v3.15.png',
    badge: 'v3.15.0',
    to: 'https://nuxt.com/blog/v3-15',
    target: '_blank',
    authors: [
      {
        name: 'Daniel Roe',
        avatar: {
          src: 'https://github.com/danielroe.png',
          alt: 'Daniel Roe',
          loading: 'lazy' as const
        },
        to: 'https://github.com/danielroe',
        target: '_blank'
      }
    ]
  }
]
</script>

<template>
  <UChangelogVersions :indicator="false">
    <UChangelogVersion
      v-for="version in versions"
      :key="version.title"
      v-bind="version"
      :badge="undefined"
      class="flex items-start"
      :ui="{
        container: 'max-w-lg me-0',
        indicator: 'sticky top-(--ui-header-height) pt-4 -mt-4 flex flex-col items-end'
      }"
    >
      <template #indicator>
        <UBadge :label="version.badge" variant="soft" />

        <span class="text-sm text-muted">{{
          new Date(version.date).toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
          })
        }}</span>
      </template>
    </UChangelogVersion>
  </UChangelogVersions>
</template>

스크롤 컨테이너와 함께: badge{label="4.4+" class="align-text-top"}

객체를 indicator Prop에 전달하여 스크롤 컨테이너를 구성합니다. 기본적으로 표시기는 창/페이지 스크롤(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">
    <UChangelogVersions v-if="scrollContainer" :indicator="{ container: scrollContainer }" />
  </div>
</template>

사용자 정의 container를 사용할 때는 컨테이너 요소가 UChangelogVersions 이전에 마운트되어 있는지 확인합니다.

API

Props (### Props)

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`versions`		`T[]`
`indicator`	`true`	`boolean \| 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) https://motion.dev/docs/vue-use-scroll#api
`indicatorMotion`	`true`	`boolean \| SpringOptions` Enable scrolling motion effect on the indicator bar. `{ damping: 30, restDelta: 0.001 }` https://motion.dev/docs/vue-transitions#spring
`ui`		`{ root?: SlotClass; container?: SlotClass; indicator?: SlotClass; beam?: SlotClass; }`

슬롯

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`	`{}`

ChangelogVersions 내에서 ChangelogVersion 구성 요소의 모든 슬롯을 사용할 수 있으며, versions prop을 사용할 때 개별 버전을 사용자 정의 할 수 있도록 자동으로 전달됩니다.

<template>
  <UChangelogVersions :versions="versions">
    <template #body="{ version }">
      <Markdown :value="version.content" />
    </template>
  </UChangelogVersions>
</template>

Theme 테마

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 '@nuxt/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]'
          }
        }
      }
    })
  ]
})

변경 로그

No recent changes

ChangelogVersion

A customizable article to display in a changelog.

Page

A grid layout for your pages with left and right columns.