Pinia

You can use Vike with Pinia.

This page documents how to manually integrate Pinia.

You can use vike-vue-pinia instead of manually integrating Pinia yourself.

Initial state

When using a store such as Pinia, your components don't access fetched data directly: your components only access the store.

Integration example:

  1. Initialize Pinia with app.use() inside onCreateApp().
  2. Get the initial SSR state of the store and make it available as pageContext.initialStoreState.

    For example in onAfterRenderHtml(), or onRenderHtml() if you don't use vike-react/vike-vue/vike-solid.

    See also: API > pageContext > Custom.

  3. Make pageContext.initialStoreState available on the client-side.

    See API > passToClient.

  4. Initialize Pinia on the client-side with pageContext.initialStoreState.

    For example in onBeforeRenderClient(), or onRenderClient() if you don't use vike-react/vike-vue/vike-solid.

See also:

Examples

See also