[CLOSED]: Hydration Nuxt 3 + Pinia
nuxt 3 can't handle pinia changes on server side
Error: "[Vue warn]: Hydration node mismatch:"
simple example: https://stackblitz.com/edit/github-6xitgs?file=stores%2FuseTestStore.ts,app.vue,nuxt.config.ts,components%2FTest.vue
Observing, I noticed that when we make changes to the state of the pinia variables during component initialization (server-side loading), we have this error, if the change comes after a user interaction (client-side) we do not have these problems.
CLOSED discussion:
https://github.com/nuxt/nuxt/issues/26508
Conclusion:
"I think this is the same issue as https://www.youtube.com/watch?v=dZSNW07sO-A.
Global state can't update HTML that has already been rendered." - by: @danielroe
Error: "[Vue warn]: Hydration node mismatch:"
simple example: https://stackblitz.com/edit/github-6xitgs?file=stores%2FuseTestStore.ts,app.vue,nuxt.config.ts,components%2FTest.vue
Observing, I noticed that when we make changes to the state of the pinia variables during component initialization (server-side loading), we have this error, if the change comes after a user interaction (client-side) we do not have these problems.
CLOSED discussion:
https://github.com/nuxt/nuxt/issues/26508
Conclusion:
"I think this is the same issue as https://www.youtube.com/watch?v=dZSNW07sO-A.
Global state can't update HTML that has already been rendered." - by: @danielroe
GitHub
Environment Operating System: Windows_NT Node Version: v20.0.0 Nuxt Version: 3.11.1 CLI Version: 3.11.1 Nitro Version: 2.9.5 Package Manager: npm@9.6.4 Builder: - User Config: app, runtimeConfig, c...
YouTubeDaniel Roe
Ever wonder what's different about rendering a Vue app on the server, or why you sometimes get hydration errors with a Pinia store or global state?
This video covers why and how you might have a hydration error when using and setting global state.
This video covers why and how you might have a hydration error when using and setting global state.
