日時表示専用コンポーネントであるNuxtTime
次に紹介するのは、バージョン3.17で新たに導入されたNuxtTimeコンポーネントです。NuxtTimeコンポーネントは、日時表示におけるハイドレーションミスマッチの解消を実現するコンポーネントです。
ハイドレーションミスマッチの温床となる時刻表示
例えば、リスト5のコードがあるとします。単純にその時点の日時（Dateオブジェクト）を表示させるコードです。
<script setup lang="ts">
const now = ref(new Date());
</script>
<template>
<p><time>{{ now }}</time></p>
</template>
このようなコンポーネントを利用していると、開発者ツールのコンソールに図1の警告が表示されることがあります。これはハイドレーションミスマッチが発生している状態を示しています。
ハイドレーションミスマッチとは、サーバサイドでのレンダリング結果とクライアントサイドでのレンダリング結果が違うことを指します。こういった現象は、リスト5の日時表示のように、レンダリングのたびに表示内容が違う場合によく発生します。
Nuxtでは、まずサーバサイドでレンダリングを行います。リスト5のtimeタグ内は、もちろん、その時点での日時となります。そのようにレンダリングされたHTMLがブラウザに送信され、ブラウザ上ではさらにレンダリングされます。
サーバでのレンダリングからクライアントでのレンダリングまでの間に僅かでも時間差があると、両者で異なった日時が表示されてしまい、ミスマッチが発生する原因となるのです。これが、日時表示を伴うコンポーネントがハイドレーションミスマッチの温床となりやすい理由です。
日時表示でハイドレーションミスマッチを解消するNuxtTime
この問題を解決するために導入されたのが、NuxtTimeコンポーネントです。このコンポーネントは、以下のように使用します。
<NuxtTime v-bind:datetime="now"/>
v-bind:datetime属性に、表示したいDateオブジェクト、ISO日時フォーマットの文字列、またはUNIXタイムスタンプ（数値）を渡します。
NuxtTimeコンポーネントは、この入力を受け取り、自動的に次のような<time>タグへとレンダリングを行います。その際に、サーバサイドのレンダリングの際のdatatime属性の値と、クライアントサイドでのレンダリングの際のdatatime属性の値を比較し、適切な方でレンダリングするように自動判定するようになっています。つまり、ハイドレーションミスマッチへも自動的に対応されるため、開発者はこの問題に頭を悩ませる必要がなくなります。
<time datetime="2026-02-16T02:38:27.690Z" data-prehydrate-id=":NIiDfe5__B:">2026/2/16</time>
ロケールとフォーマットの指定
ただし、timeタグへとレンダリングされる際に、デフォルトでは、サーバ、もしくは、ブラウザのロケールを利用した日付のみの表示となってしまいます。ロケールや表示フォーマットをカスタマイズしたい場合は、次のようなコードを記述します。
<NuxtTime v-bind:datetime="now" locale="ja-JP" timeStyle="full"/>
この場合は、次のようにレンダリングされます。
<time datetime="2026-02-16T02:38:27.690Z" data-prehydrate-id=":NIiDfe5__B:">11時38分27秒 日本標準時</time>
ロケールの指定はlocale属性（例: "ja-JP"）を使用し、表示フォーマットはIntl.DateTimeFormatのオプションをそのまま利用できます。
上記の例では、時刻表示のフォーマットを指定するtimeStyle属性に"full"が指定されています。他にも日付表示フォーマットのdateStyle属性や、day、hour、minuteなど、日時を個別にフォーマットするための属性が用意されています。詳細な属性値については、公式ドキュメントを参照してください。
