NUXT0032Use NuxtTime or ClientOnly for time-dependent rendering

Why it happens

Server-rendered markup must match the first client render. Browser-only state, time, randomness, or hash-sensitive URLs can create hydration mismatches.

Fix

Use <NuxtTime> for SSR-safe date output. Use <ClientOnly> for browser-only timestamps, or use useState() when the first rendered value must stay stable across SSR and hydration.

Example

Use NuxtTime for rendered dates

Before

<template>
  <time>{{ new Date().toLocaleString() }}</time>
</template>

After

<template>
  <NuxtTime :datetime="new Date()" />
</template>

Use ClientOnly for browser-only time

Before

<template>
  <p>Rendered at {{ new Date().toLocaleTimeString() }}</p>
</template>

After

<template>
  <ClientOnly>
    <p>Rendered at {{ new Date().toLocaleTimeString() }}</p>
  </ClientOnly>
</template>

Verify the fix

Run only this rule after editing so the report stays focused on the diagnostic you are closing:

pnpm nuxt doctor --rules nuxt/hydration/no-time-dependent-render-without-nuxttime-or-clientonly

Useful links

• Upstream docs

Related rule

• nuxt/hydration/no-time-dependent-render-without-nuxttime-or-clientonly