时间

NuxtTime

服务端渲染时间组件，避免 Hydration 不匹配问题。

<template>
  <!-- 相对时间（如"3小时前"） -->
  <NuxtTime :datetime="date" relative />

  <!-- 格式化时间 -->
  <NuxtTime :datetime="date" format="yyyy-MM-dd" />

  <!-- 完整用法 -->
  <NuxtTime
    :datetime="new Date()"
    locale="zh-CN"
    format="yyyy年MM月dd日 HH:mm"
  />
</template>

Props

Prop	类型	默认值	说明
datetime	Date | string | number	-	时间值（必填）
locale	string	-	语言环境（如 zh-CN、en-US）
format	string	-	格式字符串
relative	boolean	false	显示相对时间

为什么需要 NuxtTime？

直接使用 new Date() 会导致 Hydration 不匹配：

<!-- ❌ 服务端和客户端时间不同，产生 Hydration 警告 -->
<template>
  <p>{{ new Date().toLocaleString() }}</p>
</template>

<!-- ✅ 使用 NuxtTime，服务端渲染后客户端不重复计算 -->
<template>
  <NuxtTime :datetime="new Date()" format="yyyy-MM-dd HH:mm" />
</template>

原因

SSR 在服务器上渲染时使用服务器时间，客户端 Hydration 时使用浏览器时间，两者不同导致不匹配。NuxtTime 在服务端渲染时间字符串，客户端不重新计算。

常用格式

<template>
  <!-- 日期 -->
  <NuxtTime :datetime="date" format="yyyy-MM-dd" />
  <!-- 输出：2024-01-15 -->

  <!-- 时间 -->
  <NuxtTime :datetime="date" format="HH:mm:ss" />
  <!-- 输出：14:30:00 -->

  <!-- 中文格式 -->
  <NuxtTime :datetime="date" locale="zh-CN" format="yyyy年MM月dd日" />
  <!-- 输出：2024年01月15日 -->

  <!-- 相对时间 -->
  <NuxtTime :datetime="pastDate" relative />
  <!-- 输出：3小时前 -->
</template>

实际应用：博客文章时间

<template>
  <article>
    <h1>{{ post.title }}</h1>
    <div class="meta">
      发布于 <NuxtTime :datetime="post.createdAt" format="yyyy-MM-dd" />
      <span v-if="post.updatedAt !== post.createdAt">
        · 更新于 <NuxtTime :datetime="post.updatedAt" relative />
      </span>
    </div>
    <div v-html="post.content" />
  </article>
</template>

与原生 <time> 元素结合

NuxtTime 会渲染为语义化的 <time> 元素：

<template>
  <!-- 渲染为：<time datetime="2024-01-15T14:30:00">2024-01-15</time> -->
  <NuxtTime :datetime="date" format="yyyy-MM-dd" />
</template>

INFO

️ 如果需要在纯客户端场景显示实时时钟（如计时器） 不要使用 NuxtTime，而应在 <ClientOnly> 中使用原生 Date 操作