Where does Vuex store reside in Nuxt

Question

Just trying to get my head around Vuex / Nuxt , also quite new to nodejs.

Given that nuxt is a server side rendering app , Where does Vuex "reside" . In standard Vue , Vuex is a client side store. How does it work in Nuxt? Is it still a client side store but just rendered on the server first?

If it stays on the server , then I am just wondering how it handles per user data - or is it somehow shared. thank you.

Answer 1

SSR and rehydration:

Both client and server hold the state. When the client makes the first request to load the initial page the state is usually passed through the html document inside a script, something like:

<script type="text/javascript" defer>window.__NUXT__={"data":[{"name":"server"}],"error":null,"serverRendered":true}</script>

Then when the application js load it has to pickup the state, this processed is known as rehydration. From this point the client will maintain the server state in sync.

Nuxt specifics:

Interesting parts of Nuxt documentation:

• https://nuxtjs.org/guide/async-data
• https://nuxtjs.org/guide/vuex-store

Nuxt Vuex Demo:

https://nuxtjs.org/examples/vuex-store

Vue SSR:

In addition take a look into vue ssr documentation, it's very detailed and it does a better job explaining how everything fits in:

• https://ssr.vuejs.org/en/hydration.html
• https://ssr.vuejs.org/en/data.html

we will serialize and inline the state in the HTML. The client-side store can directly pick up the inlined state before we mount the app.