https://github.com/vuejs/pinia
๐ Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
https://github.com/vuejs/pinia
composition-api ssr store vue vuex
Last synced: 15 days ago
JSON representation
๐ Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
- Host: GitHub
- URL: https://github.com/vuejs/pinia
- Owner: vuejs
- License: mit
- Created: 2019-11-18T21:05:01.000Z (over 5 years ago)
- Default Branch: v3
- Last Pushed: 2025-04-28T19:37:21.000Z (29 days ago)
- Last Synced: 2025-05-05T11:18:41.390Z (22 days ago)
- Topics: composition-api, ssr, store, vue, vuex
- Language: TypeScript
- Homepage: https://pinia.vuejs.org
- Size: 8.77 MB
- Stars: 13,837
- Watchers: 65
- Forks: 1,137
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/funding.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome - vuejs/pinia - ๐ Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support (TypeScript)
- awesome - vuejs/pinia - ๐ Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support (TypeScript)
- StarryDivineSky - vuejs/pinia
- awesome-arsenal - Pinia - ็ถๆ็ฎก็ใ (ๆญฆๅจๅบ / ๅ็ซฏ)
- awesome - vuejs/pinia - ๐ Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support (TypeScript)
- awesome - vuejs/pinia - ๐ Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support (TypeScript)
- stars - vuejs/pinia - ๐ Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support (TypeScript)
README
# Pinia
> Intuitive, type safe and flexible Store for Vue
- ๐ก Intuitive
- ๐ Type Safe
- โ๏ธ Devtools support
- ๐ Extensible
- ๐ Modular by design
- ๐ฆ Extremely light
- โฐ๏ธ Nuxt Module
The latest version of pinia works with Vue 3. See the branch [v2](https://github.com/vuejs/pinia/tree/v2) for a version that works with Vue 2.
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](https://stackblitz.com/github/piniajs/example-vue-3-vite)
## ๐ [Demo with Nuxt 3 on StackBlitz](https://stackblitz.com/github/piniajs/example-nuxt-3)
## Help me keep working on this project ๐
- [Become a Sponsor on GitHub](https://github.com/sponsors/posva)
- [One-time donation via PayPal](https://paypal.me/posva)
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](https://vuejs.org/guide/scaling-up/state-management.html#pinia)
**Q**: _What about dynamic modules?_
**A**: Dynamic modules are not type safe, so instead [we allow creating different stores](https://pinia.vuejs.org/cookbook/composing-stores.html) that can be imported anywhere
## Installation
```bash
# or pnpm or yarn
npm install pinia
```
## Usage
### Install the plugin
Create a pinia (the root store) and pass it to app:
```js
// 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](https://pinia.vuejs.org/ssr/nuxt.html#nuxt-js), check the [Documentation](https://pinia.vuejs.org).
### Create a Store
You can create as many stores as you want, and they should each exist in different files:
```ts
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:
```ts
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](https://pinia.vuejs.org).
## License
[MIT](http://opensource.org/licenses/MIT)