Which layer should own timezone conversion in Vue 3 SSR hydration?
0 reputation · 15 Dec 2022, 21:51 UTC
The goal is to render timezone-aware dates consistently during Vue 3 server-side rendering and client hydration without triggering hydration mismatch warnings.
Vue 3 treats Date instances as plain reactive values, so the reference must be replaced for updates. Immutable libraries such as Luxon or date-fns-tz depend on an IANA zone that may differ between server and client. Vue 3.3+ does not specify whether conversion belongs in a global plugin, a state store, or individual components.
Assumptions: Vue 3.3 or later, Nuxt 3 or Vue SSR, and matching IANA tzdata on server and client. Verification means comparing server HTML with the hydrated client DOM; no implementation is assumed.
Should timezone conversion live in a global plugin, a Pinia store, or individual components? Does deferring formatting to client-only components avoid mismatches while preserving SEO for date-heavy pages?