Nuxt · NUXT0032
Use NuxtTime or ClientOnly for time-dependent rendering
Flags time-dependent values rendered during SSR before they become hydration mismatches in the browser.
nuxt/hydration/no-time-dependent-render-without-nuxttime-or-clientonlysrc/rule-packs/nuxt/rules/nuxt/no-time-dependent-render-without-nuxt-time-or-client-only.ts Upstream docs Run this rule
pnpm nuxt doctor --rules nuxt/hydration/no-time-dependent-render-without-nuxttime-or-clientonly
Why it matters
Server-rendered markup must match the first client render. Browser-only state, time, randomness, or hash-sensitive URLs can create hydration mismatches.
Recommended 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.
Useful links
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>