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

使用法

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

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

Props

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>

フォーマット用の 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

• タイプ: boolean
• 必須: false
• デフォルト: false

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

<template>
  <!-- "5 minutes ago" のように表示 -->
  <NuxtTime :datetime="Date.now() - 5 * 60 * 1000" relative />
</template>

相対時間フォーマット用の Props

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

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

これは次のように出力されます: "3 days ago" または numeric 設定に応じて "last Friday"

例

基本的な使用法

<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"
    timeZoneName="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>