Currently in Nuxt, using new Intl.DisplayNames("en", { type: "region" }) results in different outputs on the server and on the client as pointed out in this issue : https://github.com/nuxt/nuxt/issues/28644
This causes hydration mismatch errors on the client.
đ The solution you'd like
A component that takes a locale prop, and an options prop, and displays the correct text based on those props.
In order to account for all possible use cases, I believe the component's props should comply with the Intl.DisplayNamesspec.
The component should render the same content on the server and on the client.
đ Alternatives you've considered
Maybe a composable (?) or utility function that serves the same purpose is enough, the key is to have something that works both on the server and the client to avoid hydration mismatch errors.
âšī¸ Additional info
I'm available to help with this feature !
However, I'm still very new to the Vue and Nuxt ecosystem (and in programing in general) so I will definitively need guidance if I must develop this feature.
đ Your use case
Currently in Nuxt, using
new Intl.DisplayNames("en", { type: "region" })results in different outputs on the server and on the client as pointed out in this issue : https://github.com/nuxt/nuxt/issues/28644This causes hydration mismatch errors on the client.
đ The solution you'd like
A component that takes a
localeprop, and anoptionsprop, and displays the correct text based on those props.In order to account for all possible use cases, I believe the component's props should comply with the
Intl.DisplayNamesspec.The component should render the same content on the server and on the client.
đ Alternatives you've considered
Maybe a composable (?) or utility function that serves the same purpose is enough, the key is to have something that works both on the server and the client to avoid hydration mismatch errors.
âšī¸ Additional info
I'm available to help with this feature ! However, I'm still very new to the Vue and Nuxt ecosystem (and in programing in general) so I will definitively need guidance if I must develop this feature.