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ライセンスの下で公開されています。