Nuxt Time

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>

💻 開発

このリポジトリをクローンします
corepack enableを使用してCorepackを有効にします
pnpm installを使用して依存関係をインストールします
pnpm dev:prepareでモジュールをスタブ化します
pnpm devを実行して、開発モードでプレイグラウンドを開始します

ライセンス

❤️を込めて作成

MITライセンスの下で公開されています。