Pinia

Intuitive, type safe and flexible Store for Vue

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

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 💚

• Become a Sponsor on GitHub
• One-time donation via PayPal

Gold Sponsors

Silver Sponsors

Bronze Sponsors

FAQ

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

Installation

# or pnpm or yarn
npm install pinia

Usage

Install the plugin

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

// Vue 3
import { 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')

For more detailed instructions, including Nuxt configuration, check the Documentation.

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 devtools export 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,     }   }, })

Documentation

To learn more about Pinia, check its documentation.

License

MIT