Nuxt Time

用於 Nuxt 的 SSR 安全時間元素

功能

✨ 任何日期/時間的 SSR/SSG 安全渲染
💪 防止客戶端 hydration 不匹配
🏁 尊重瀏覽器地區設定
✅ 渲染語意化的 <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>