⚠️
The vite-plugin-ssr project has been renamed Vike.
  • If you are already using vite-plugin-ssr then migrate to Vike.
  • For new projects, don't use vite-plugin-ssr but use Vike instead.

Pinia

With vite-plugin-ssr we keep control over our app architecture; we can integrate Pinia simply by following its SSR docs.

Reading Recommendation.

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

Example

See the repository's /examples/vue-pinia/.