Case study
Vue 3 hydration bug breaking onboarding
A SaaS product's onboarding flow failed silently after a Vue 3 migration. New users saw blank screens on step two — blocking sign-ups.
Problem
After migrating from Vue 2 to Vue 3, the onboarding wizard rendered on the server but failed to hydrate on the client. Console showed hydration mismatch warnings. The component used `Date.now()` in a computed property, producing different values server vs client. Pinia store initialisation also ran differently between SSR and CSR.
Fix
Wrapped client-dependent logic in `onMounted` hooks. Moved time-sensitive state behind `<ClientOnly>` for the affected step indicator. Aligned Pinia store hydration with Nuxt's `useState` pattern for SSR-safe defaults. Added a Playwright test covering the full onboarding flow.
Stack
- Vue 3
- Nuxt 3
- Pinia
- TypeScript
- Playwright
Turnaround
Same-day (5 hours)
Outcome
Onboarding completion rate recovered to pre-migration levels within 24 hours. Zero hydration warnings in production logs after deploy.
Ready to ship a fix?
Flat pricing from £599. Same-day turnaround on scoped issues.
Submit your fix →