Vuex

With Vike you have full control over rendering, data fetching, data management, and HTML streaming. Integrating Vuex is mostly a matter of following its official SSR guide: Vue > SSR > Data Store (Vuex). (Vike saves you from "fighting the framework".)

Reading Recommendation.

When using a state management store such as Vuex, your components don't access fetched data directly: your components can only access the store. The fetched data merely determines the initial state of the store.

On a high-level, the integration works like this:
  1. You set the initial state of the store on the server-side. (You do it on the server-side so that the initial state is rendered to HTML.)
  2. You make the initial state available as pageContext.initialStoreState.
  3. You make pageContext.initialStoreState available on the client-side by adding 'initialStoreState' to passToClient.
  4. You initialize the store on the client-side using pageContext.initialStoreState.

Example