Nuxt hydration issues and date formatting
I am writing this because it took me annoyingly long to figure this out a couple of times before. I was seeing hydration issues, related to date formatting, come up in my app running on the server, but not when developing locally.
If this is happening to you, you might want to explicitly specify the time zone in the formatting options to ensure consistency. The server and client could have time zone differences.
It is worth noting that this is really framework agnostic and could be applied anywhere where you have a hydration process.
TypeScript
export default function (inputDate: string, locale: string) {
const dateObject = new Date(inputDate)
const options: Intl.DateTimeFormatOptions = {
year: 'numeric',
month: 'long',
day: 'numeric',
timeZone: 'UTC', // Explicitly set.
}
return new Intl.DateTimeFormat(locale, options).format(dateObject)
}
There is also an interesting Nuxt composable called useHydration(), that allows full control of the hydration cycle to set and receive data from the server.