vike-vue-pinia

vike-vue-pinia

Integrates Pinia into your vike-vue app.

Installation
Example
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]
   }

3. You can now use Pinia in any of your components.

    <template>
      <button type="button" @click="counterStore.increment">Counter {{ counterStore.count }}</button>
    </template>
   
    <script setup>
    import { useCounterStore } from './useCounterStore'
    const counterStore = useCounterStore()
    </script>

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

Note

The vike-vue-pinia extension requires vike-vue.

See also

• Vike Docs > Pinia