<NuxtTime>

<NuxtTime> 组件以本地化友好的格式显示时间，并保持服务端-客户端一致。

该组件在 Nuxt v3.17+ 中可用。 :

<NuxtTime> 组件让你以本地化友好的格式显示日期和时间，并具有正确的 <time> HTML 语义。它确保服务端和客户端之间的渲染一致，不会发生 hydration 不匹配问题。

用法

你可以在应用中的任何位置使用 <NuxtTime> 组件：

app/app.vue

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

Props

`datetime`

类型：Date | number | string
必填：true

要显示的日期和时间值。你可以提供：

一个 Date 对象
时间戳（数字）
一个 ISO 格式的日期字符串

app/app.vue

<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'）：

app/app.vue

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

格式化 Props

该组件接受 Intl.DateTimeFormat 选项的任何属性：

app/app.vue

<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 启用相对时间格式化：

app/app.vue

<template>
  <!-- 显示类似 "5 分钟前" 的内容 -->
  <NuxtTime
    :datetime="Date.now() - 5 * 60 * 1000"
    relative
  />
</template>

相对时间格式化 Props

当 relative 设置为 true 时，该组件还接受 Intl.RelativeTimeFormat 的属性：

由于 style 是一个保留 prop，这里改用 relativeStyle prop。 :

app/app.vue

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

这会输出类似 "3 天前" 或 "上周五"（取决于 numeric 设置）的内容。

示例

基础用法

app/app.vue

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

自定义格式化

app/app.vue

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

相对时间

app/app.vue

<template>
  <div>
    <p>
      <NuxtTime
        :datetime="Date.now() - 30 * 1000"
        relative
      />
      <!-- 30 秒前 -->
    </p>
    <p>
      <NuxtTime
        :datetime="Date.now() - 45 * 60 * 1000"
        relative
      />
      <!-- 45 分钟前 -->
    </p>
    <p>
      <NuxtTime
        :datetime="Date.now() + 2 * 24 * 60 * 60 * 1000"
        relative
      />
      <!-- 2 天后 -->
    </p>
  </div>
</template>

使用自定义区域设置

app/app.vue

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