🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
Alternatives To Pinia
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Vue Element Admin81,215211 days ago7August 08, 20201,279mitVue
:tada: A magical vue admin
Vue2 Elm39,579
2 months ago106gpl-2.0Vue
Large single page application with 45 pages built on vue2 + vuex. 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
Vuex27,97342,33112,67715 days ago61June 17, 2021127mitJavaScript
🗃️ Centralized State Management for Vue.js.
a day ago427mitVue
高颜值的第三方网易云播放器,支持 Windows / macOS / Linux :electron:
Vue Admin Template18,004
3 days ago294mitJavaScript
a vue2.0 minimal admin template
Vue Vben Admin16,601
4 days ago30July 15, 2020587mitVue
A modern vue admin. It is based on Vue3, vite and TypeScript. It's fast!
Iview Admin15,9357a year ago206September 04, 2019611mitVue
Vue 2.0 admin management system template based on iView
Vue2 Manage12,407
4 months ago100gpl-2.0Vue
A admin template based on vue + element-ui. 基于vue + element-ui的后台管理系统基于 vue + element-ui 的后台管理系统
a month ago20JavaScript
:octocat:Vue.js 源码解析
D2 Admin11,928
2 months ago45August 09, 202021mitJavaScript
An elegant dashboard
Alternatives To Pinia
Select To Compare

Alternative Project Comparisons

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: pia. 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 Ormires 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 yarn
npm 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 3
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

// Vue 2
import { createPinia, PiniaVuePlugin } from 'pinia'

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

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
      // gives access only to specific state or getter


To learn more about Pinia, check its documentation.



Popular Vue Projects
Popular Vuex Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.