vike-vue-pinia

Integrates Pinia into your vike-vue app.

Table of Contents

Installation
Basic usage
Example
Pinia plugins
Persistence
Populate store with +data
Version history
See also

Installation

1. npm install vike-vue-pinia pinia
2. Extend +config.js:

   // pages/+config.js
   
   import vikeVue from 'vike-vue/config'
   import vikeVuePinia from 'vike-vue-pinia/config'
   
   export default {
     // ...
     extends: [vikeVue, vikeVuePinia]
   }

[!NOTE] The vike-vue-pinia extension requires vike-vue.

Basic usage

// stores/useCounterStore.ts

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
})

<!-- components/Counter.vue -->

<template>
  <button type="button" @click="counterStore.increment">
    Counter {{ counterStore.count }}
  </button>
</template>

<script setup>
import { useCounterStore } from '../stores/useCounterStore'
const counterStore = useCounterStore()
</script>

Example

See examples/vue-pinia/.

Pinia plugins

You can install Pinia plugins (e.g. pinia-plugin-persistedstate) by using vike-vue-pinia's +onCreatePinia hook.

// pages/+onCreatePinia.ts

import piniaPlugin from 'pinia-awesome-plugin'
import type { PageContext } from 'vike/types'

export async function onCreatePinia(pageContext: PageContext) {
  pageContext.pinia.use(piniaPlugin)
}

[!TIP] For client-only plugins, you can use .client.js or pageContext.isClientSide.

Persistence

You can use vike-vue-pinia with Pinia plugins that persist your store to localStorage, cookies, etc.

[!TIP] See Pinia plugins for how to install Pinia plugins.

If you use SSR and want to persist to localStorage, the general recommendation is to use clientOnly() to avoid a hydration mismatch. Alternatively, you can persist to cookies — state stored in cookies is passed to the server and can be server-side rendered.

Populate store with +data

To populate your store with data fetched via the +data hook, use +onData and pageContext.data.

// pages/todos/+onData.ts
// Environment: server, client

export { onData }

import type { PageContext } from 'vike/types'
import type { Data } from './+data'
import { useTodoStore } from '../../stores/useTodoStore'

function onData(pageContext: PageContext & { data?: Data }) {
  const { initTodos } = useTodoStore(pageContext.pinia!)
  initTodos(pageContext.data!.todosInit)

  // Saving KBs: we don't need pageContext.data (we use the store instead)
  // - If we don't delete pageContext.data then Vike sends pageContext.data to the client-side
  // - This optimization only works with SSR: if the page is pre-rendered then don't do this
  delete pageContext.data
}

See complete To-Do List example at examples/vue-pinia.

[!NOTE] During SSR, +onData is called only on the server — the store's initial state (set by initTodos()) is automatically sent to the client, so you don't need to populate the store again on the client.

This approach prevents hydration mismatches, as it ensures the client has the exact same initial state as the server during SSR.

Version history

See CHANGELOG.md.

See also

• Vike Docs > Pinia