<NuxtTime>

ソース
<NuxtTime> コンポーネントは、サーバーとクライアントで一貫性のある、ロケールに適した形式で時間を表示します。
このコンポーネントは Nuxt v3.17+ で利用可能です。

<NuxtTime> コンポーネントを使用すると、日付と時刻をロケールに適した形式で、適切な <time> HTML セマンティクスで表示できます。サーバーとクライアント間でハイドレーションの不一致なしに一貫したレンダリングを保証します。

使用方法

<NuxtTime> コンポーネントはアプリ内のどこでも使用できます。

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

プロップス

datetime

  • タイプ: Date | number | string
  • 必須: true

表示する日付と時刻の値。以下を提供できます。

  • Date オブジェクト
  • タイムスタンプ (数値)
  • ISO 形式の日付文字列
<template>
  <NuxtTime :datetime="Date.now()" />
  <NuxtTime :datetime="new Date()" />
  <NuxtTime datetime="2023-06-15T09:30:00.000Z" />
</template>

locale

  • 型: string
  • 必須: false
  • デフォルト: ブラウザまたはサーバーのデフォルトロケールを使用

が悪化します。BCP 47 言語タグフォーマット用 (例: 'en-US', 'fr-FR', 'ja-JP')

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

フォーマットプロパティ

このコンポーネントは、以下のすべてのプロパティを受け入れます。Intl.DateTimeFormatoptions

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

これは、「2025年4月22日、午前08時30分」のような出力になります。

relative

  • 型: boolean
  • 必須: false
  • デフォルト: false

Intl.RelativeTimeFormat API を使用した相対時間フォーマットを有効にします。

<template>
  <!-- Shows something like "5 minutes ago" -->
  <NuxtTime
    :datetime="Date.now() - 5 * 60 * 1000"
    relative
  />
</template>

相対時間フォーマットプロパティ

relative が true に設定されている場合、コンポーネントは以下のプロパティも受け入れます。Intl.RelativeTimeFormat:

<template>
  <NuxtTime
    :datetime="Date.now() - 3 * 24 * 60 * 60 * 1000"
    relative
    numeric="auto"
    style="long"
  />
</template>

これは、numeric の設定に応じて、「3日前」または「先週の金曜日」のような出力になります。

例

基本的な使い方

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

カスタムフォーマット

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

相対時間

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

カスタムロケールで

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