Nuxt 时间

用于 Nuxt 的 SSR 安全时间元素

特性

✨ 对任何日期/时间进行 SSR/SSG 安全渲染
💪 防止客户端的水合不匹配
🏁 尊重浏览器区域设置
✅ 渲染语义化的 <time> 元素

安装

安装并将 nuxt-time 添加到您的 nuxt.config。

npx nuxi@latest module add time

export default defineNuxtConfig({
  modules: ['nuxt-time'],
})

用法

要使用，您可以在应用程序中的任何位置使用 <NuxtTime> 组件。它将渲染一个符合规范的 <time> 元素。

它接受 datetime 和 locale （可选）属性，以及 Intl.DateTimeFormat 接受的任何属性（请参阅 MDN 参考）。注意：您可以通过 datetime 提供 Date 或 number（例如 Date.now()），它将以 ISO 格式的日期正确呈现。

<template>
  <!--
    Date.now() will safely respect the time on the server, not on the
    client. What's more, there will be no flash between server
    and client locale formatting.
  -->
  <NuxtTime :datetime="Date.now()" second="numeric" month="long" day="numeric" />
</template>

相对时间格式化

Nuxt Time 还支持使用 Intl.RelativeTimeFormat API 进行相对时间格式化。您可以通过将 relative 属性设置为 true 来启用此功能。

<template>
  <!--
    This will display the time relative to the current time, e.g., "5 minutes ago"
  -->
  <NuxtTime :datetime="Date.now() - 5 * 60 * 1000" relative />
</template>