how to fix hydration error?

[reslear]

used syntax:

{{ $df(item.updatedAt, 'LL') }}
// or
{{ $dayjs(item.updatedAt).format('LL') }}

[reslear]

oh fixed simple add v-if:

<div v-if="item.updatedAt">
  {{ $df(item.updatedAt, 'LL') }}
</div>

[GaborTorma]

I think item.updatedAt is undefined on server side

[reslear]

Uh, that didn't help, so it turns out

it does hydration on the server with the selected language - as if it caches only the first one, when you refresh the page with another language - there is already a hydration problem.

also same is add:

definePageMeta({
  key: (route) => route.fullPath,
})

[GaborTorma]

Can you provide a minimal repo?

[reslear]

https://stackblitz.com/edit/nuxt-dayjs-i18n-xtqkqq

1. Change locale to hu
2. after prefix_except_default update url and reload page
3. re-inspect frame

https://github.com/GaborTorma/nuxt-dayjs-i18n/assets/12596485/1cc4dcbb-93c0-443c-a540-8ed3a5ef46cb

[reslear]

temporally worked solution

<time :datetime="item.updatedAt">
  <ClientOnly :fallback="item.updatedAt">{{ $df(item.updatedAt, 'LL') }}</ClientOnly>
</time>

[GaborTorma]

Unfortunately the Day.js is not SSR ready. Server-side generated with the default locale.

[GaborTorma]

I found a solution. I will release a new version in few days.

[GaborTorma]

Fixed in v.2.0.0 Make sure don't define defaultLocale in dayjs config. I comes from i18n.locale.

[GaborTorma]

Use dayjs-nuxt@2.1.9

[reslear]

Updated, works like a charm :) you are awesome !