The Vue Store that you will enjoy using

Pinia logo

npm package build status code coverage


Intuitive, type safe and flexible Store for Vue

  • 💡 Intuitive
  • 🔑 Type Safe
  • ⚙️ Devtools support
  • 🔌 Extensible
  • 🏗 Modular by design
  • 📦 Extremely light

Pinia works with both Vue 2 and Vue 3.

Pinia is the most similar English pronunciation of the word pineapple in Spanish: piña. A pineapple is in reality a group of individual flowers that join together to create a multiple fruit. Similar to stores, each one is born individually, but they are all connected at the end. It's also a delicious tropical fruit indigenous to South America.

👉 Demo with Vue 3 on StackBlitz

👉 Demo with Nuxt 3 on StackBlitz

Help me keep working on this project 💚

Gold Sponsors


Silver Sponsors

VueMastery Prefect

Bronze Sponsors

Stanislas Ormières Antony Konstantinidis Storyblok NuxtJS


A few notes about the project and possible questions:

Q: Is Pinia the successor of Vuex?

A: Yes

Q: What about dynamic modules?

A: Dynamic modules are not type safe, so instead we allow creating different stores that can be imported anywhere


# or pnpm or yarnnpm install pinia

If you are using Vue <2.7, make sure to install latest @vue/composition-api:

npm install pinia @vue/composition-api


Install the plugin

Create a pinia (the root store) and pass it to app:

// Vue 3import { createApp } from 'vue'import { createPinia } from 'pinia'import App from './App.vue'const pinia = createPinia()const app = createApp(App)app.use(pinia)app.mount('#app')
// Vue 2import { createPinia, PiniaVuePlugin } from 'pinia'Vue.use(PiniaVuePlugin)const pinia = createPinia()new Vue({  el: '#app',  // other options...  // ...  // note the same `pinia` instance can be used across multiple Vue apps on  // the same page  pinia,})

Create a Store

You can create as many stores as you want, and they should each exist in different files:

import { defineStore } from 'pinia'// main is the name of the store. It is unique across your application// and will appear in devtoolsexport const useMainStore = defineStore('main', {  // a function that returns a fresh state  state: () => ({    counter: 0,    name: 'Eduardo',  }),  // optional getters  getters: {    // getters receive the state as first parameter    doubleCounter: (state) => state.counter * 2,    // use getters in other getters    doubleCounterPlusOne(): number {      return this.doubleCounter + 1    },  },  // optional actions  actions: {    reset() {      // `this` is the store instance      this.counter = 0    },  },})

defineStore returns a function that has to be called to get access to the store:

import { useMainStore } from '@/stores/main'import { storeToRefs } from 'pinia'export default defineComponent({  setup() {    const main = useMainStore()    // extract specific store properties    const { counter, doubleCounter } = storeToRefs(main)    return {      // gives access to the whole store in the template      main,      // gives access only to specific state or getter      counter,      doubleCounter,    }  },})


To learn more about Pinia, check its documentation.