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>