<NuxtTime>

Source
<NuxtTime> 컴포넌트는 서버-클라이언트 간 일관성을 유지하면서 로케일 친화적인 형식으로 시간을 표시합니다.
이 컴포넌트는 Nuxt v3.17+에서 사용할 수 있습니다.

<NuxtTime> 컴포넌트는 올바른 <time> HTML 시맨틱과 함께 로케일 친화적인 형식으로 날짜와 시간을 표시할 수 있게 해줍니다. 서버와 클라이언트 간의 렌더링이 수화(hydration) 불일치 없이 일관되도록 보장합니다.

Usage

앱 어디에서나 <NuxtTime> 컴포넌트를 사용할 수 있습니다:

<template>
  <NuxtTime :datetime="Date.now()" />
</template>

Props

datetime

  • Type: Date | number | string
  • Required: true

표시할 날짜와 시간 값입니다. 다음과 같이 제공할 수 있습니다:

  • Date 객체
  • 타임스탬프(숫자)
  • ISO 형식의 날짜 문자열
<template>
  <NuxtTime :datetime="Date.now()" />
  <NuxtTime :datetime="new Date()" />
  <NuxtTime datetime="2023-06-15T09:30:00.000Z" />
</template>

locale

  • Type: string
  • Required: false
  • Default: 브라우저 또는 서버의 기본 로케일 사용

포매팅에 사용할 BCP 47 언어 태그입니다(예: 'en-US', 'fr-FR', 'ja-JP'):

<template>
  <NuxtTime
    :datetime="Date.now()"
    locale="fr-FR"
  />
</template>

Formatting Props

이 컴포넌트는 Intl.DateTimeFormat 옵션의 모든 속성을 받을 수 있습니다:

<template>
  <NuxtTime
    :datetime="Date.now()"
    year="numeric"
    month="long"
    day="numeric"
    hour="2-digit"
    minute="2-digit"
  />
</template>

이는 "April 22, 2025, 08:30 AM"과 같은 결과를 출력합니다.

relative

  • Type: boolean
  • Required: false
  • Default: false

Intl.RelativeTimeFormat API를 사용한 상대 시간 포매팅을 활성화합니다:

<template>
  <!-- "5 minutes ago"와 같이 표시됩니다 -->
  <NuxtTime
    :datetime="Date.now() - 5 * 60 * 1000"
    relative
  />
</template>

Relative Time Formatting Props

relative가 true로 설정되면, 컴포넌트는 Intl.RelativeTimeFormat의 속성도 받을 수 있습니다:

style은 예약된 prop이므로, 대신 relativeStyle prop이 사용됩니다.
<template>
  <NuxtTime
    :datetime="Date.now() - 3 * 24 * 60 * 60 * 1000"
    relative
    numeric="auto"
    relative-style="long"
  />
</template>

이는 numeric 설정에 따라 "3 days ago" 또는 "last Friday"와 같은 결과를 출력합니다.

Examples

Basic Usage

<template>
  <NuxtTime :datetime="Date.now()" />
</template>

Custom Formatting

<template>
  <NuxtTime
    :datetime="Date.now()"
    weekday="long"
    year="numeric"
    month="short"
    day="numeric"
    hour="numeric"
    minute="numeric"
    second="numeric"
    time-zone-name="short"
  />
</template>

Relative Time

<template>
  <div>
    <p>
      <NuxtTime
        :datetime="Date.now() - 30 * 1000"
        relative
      />
      <!-- 30 seconds ago -->
    </p>
    <p>
      <NuxtTime
        :datetime="Date.now() - 45 * 60 * 1000"
        relative
      />
      <!-- 45 minutes ago -->
    </p>
    <p>
      <NuxtTime
        :datetime="Date.now() + 2 * 24 * 60 * 60 * 1000"
        relative
      />
      <!-- in 2 days -->
    </p>
  </div>
</template>

With Custom Locale

<template>
  <div>
    <NuxtTime
      :datetime="Date.now()"
      locale="en-US"
      weekday="long"
    />
    <NuxtTime
      :datetime="Date.now()"
      locale="fr-FR"
      weekday="long"
    />
    <NuxtTime
      :datetime="Date.now()"
      locale="ja-JP"
      weekday="long"
    />
  </div>
</template>