v4 (4.0.0)
Nuxt on GitHub

<NuxtTime>

源代码
<NuxtTime> 组件以本地化友好格式显示时间，并确保服务端与客户端渲染一致性。
该组件在 Nuxt v3.17+ 版本中可用。

<NuxtTime> 组件允许您以符合本地化习惯的格式显示日期和时间，并提供正确的 <time> HTML 语义。它能确保服务端和客户端渲染一致，避免 hydration 不匹配问题。

基本用法

您可以在应用的任何位置使用该组件：

<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 语言标签（如 'zh-CN', 'en-US', 'ja-JP'）：

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

格式化参数

组件接受所有 Intl.DateTimeFormat 的配置选项：

<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>
  <!-- 显示为 "5分钟前" -->
  <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"
    timeZoneName="short"
  />
</template>

相对时间

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

多语言示例

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