{"id":11554,"library":"pinia","title":"Pinia: The Intuitive Store for Vue","description":"Pinia is an intuitive, type-safe, and flexible state management library specifically designed for Vue.js applications. It serves as a lightweight and robust alternative to Vuex, leveraging Vue 3's Composition API for a more modern and streamlined development experience. The current stable major version is v3.x, with the latest release being v3.0.4, indicating active maintenance and minor updates within the major release. Pinia distinguishes itself through its excellent TypeScript support, providing strong type inference out-of-the-box, automatic module generation (no need for nested modules), and a plugin system. Its API is designed to be straightforward and familiar to Vue developers, making state management less verbose and more declarative. Releases within a major version (like v3.0.x) typically include bug fixes and minor improvements, with major version bumps (v2 to v3) often aligning with Vue major version releases and dropping support for older ecosystems (e.g., Vue 2).","status":"active","version":"3.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/pinia","tags":["javascript","vue","vuex","store","pinia","piña","pigna","composition","api","typescript"],"install":[{"cmd":"npm install pinia","lang":"bash","label":"npm"},{"cmd":"yarn add pinia","lang":"bash","label":"yarn"},{"cmd":"pnpm add pinia","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for type-safe usage, especially since v3.0.0 leverages native Awaited which needs TS >=4.5.0.","package":"typescript","optional":false},{"reason":"Pinia is a state management library for Vue.js applications.","package":"vue","optional":false}],"imports":[{"note":"Pinia is primarily used with ESM. `createPinia` initializes the Pinia store for your Vue app.","wrong":"const { createPinia } = require('pinia');","symbol":"createPinia","correct":"import { createPinia } from 'pinia'"},{"note":"`defineStore` is a named export used to create individual stores. It is not a default export.","wrong":"import defineStore from 'pinia';","symbol":"defineStore","correct":"import { defineStore } from 'pinia'"},{"note":"When importing types like `Store` or `Pinia`, use `import type` for better tree-shaking and explicit type import semantics in TypeScript.","symbol":"Store","correct":"import type { Store } from 'pinia'"},{"note":"While `defineStore` is imported from 'pinia', the specific `useMyStore` composable function is exported from *your own store file* (e.g., `stores/myStore.ts`) after defining it with `defineStore`.","wrong":"import { useStore } from 'pinia';","symbol":"useStore","correct":"import { useMyStore } from './stores/myStore'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport { createPinia, defineStore } from 'pinia';\n\nconst app = createApp({\n  template: `\n    <div>\n      <h1>Counter: {{ counter }}</h1>\n      <p>Double Counter: {{ doubleCounter }}</p>\n      <button @click=\"increment\">Increment</button>\n      <button @click=\"reset\">Reset</button>\n    </div>\n  `,\n  setup() {\n    const main = useMainStore();\n    return {\n      counter: main.counter,\n      doubleCounter: main.doubleCounter,\n      increment: main.increment,\n      reset: main.reset\n    };\n  }\n});\n\n// Define a Pinia store\nconst useMainStore = defineStore('main', {\n  state: () => ({\n    counter: 0,\n    name: 'Pinia Example'\n  }),\n  getters: {\n    doubleCounter: (state) => state.counter * 2\n  },\n  actions: {\n    increment() {\n      this.counter++;\n    },\n    reset() {\n      this.counter = 0;\n    }\n  }\n});\n\nconst pinia = createPinia();\napp.use(pinia);\napp.mount('#app');\n\n// To make it runnable in a simple environment, assume an #app div exists:\ndocument.body.innerHTML = '<div id=\"app\"></div>';\n","lang":"typescript","description":"This quickstart demonstrates how to set up Pinia in a Vue 3 application, define a basic store with state, getters, and actions, and use it within a Vue component."},"warnings":[{"fix":"Upgrade your Vue application to Vue 3 or stick to Pinia v2.x. Refer to the official migration guide for v2 to v3.","message":"Pinia v3.0.0 drops support for Vue 2. If you are using Vue 2, you must remain on Pinia v2.x.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Update your project's TypeScript dependency to 4.5.0 or newer (e.g., `npm install -D typescript@latest`).","message":"Pinia v3.0.0 requires TypeScript version >=4.5.0 due to its internal use of the native `Awaited` type. Projects with older TypeScript versions will encounter compilation errors.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Consult the Pinia v3 documentation on writing plugins. The migration guide from v2 to v3 provides details on this change.","message":"The `PiniaStorePlugin` API has been removed in Pinia v3.0.0. Developers using custom plugins need to adapt to the new plugin system, which likely involves using `PiniaPlugin`.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Always initialize and install Pinia as a Vue plugin (`app.use(createPinia())`) at the root of your application before any component that consumes a store is mounted.","message":"Ensure `app.use(pinia)` is called *before* you try to access any stores within your components' `setup` functions or lifecycle hooks, otherwise stores will not be available.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `app.use(createPinia())` is called correctly on your Vue application instance before mounting.","cause":"Pinia (or another plugin) was not installed correctly with `app.use()`.","error":"TypeError: Cannot read properties of undefined (reading 'install')"},{"fix":"Add `app.use(createPinia())` to your application's entry point before any component using Pinia is initialized.","cause":"Attempting to use `defineStore` or `useMyStore` composables before Pinia has been installed on the Vue application.","error":"Error: [pinia]: Missing Pinia plugin. Ensure 'app.use(createPinia())' is called."},{"fix":"Upgrade TypeScript to version 4.5.0 or higher in your project dependencies (`npm install -D typescript@latest`).","cause":"TypeScript version is older than 4.5.0, which is required by Pinia v3.0.0 for its use of the `Awaited` utility type.","error":"Type 'T' does not satisfy the constraint 'object'."}],"ecosystem":"npm"}