Pinia

Pinia is the official state management library for Vue, designed around the Composition API to provide a store that is intuitive, fully type-safe, and modular by design. It replaces Vuex as the recommended solution for sharing state across components, letting you define independent stores that are automatically inferred by TypeScript without any extra typing boilerplate.

Stores in Pinia are extremely lightweight and tree-shakeable, expose state, getters, and actions through a flat API, and integrate directly with Vue Devtools for time-travel debugging, hot module replacement, and plugin extensibility. It works seamlessly with both Vue 3 and server-side rendering setups such as Nuxt.

What You Get

• A createPinia() root store you install once and share across the whole application, including SSR-safe state hydration.
• The defineStore API for declaring modular stores using either an options object or a Composition-API setup function.
• Automatic, boilerplate-free TypeScript inference for state, getters, and actions across every store.
• First-class Vue Devtools integration with time-travel debugging, action tracking, and hot module replacement support.
• An extensible plugin system plus helpers like storeToRefs, mapStores, and mapState for both Composition and Options API components.

Common Use Cases

• Sharing authentication, user, or session state across many components in a Vue 3 single-page application.
• Managing server-fetched data and cart or form state in Nuxt applications with proper SSR hydration.
• Migrating an existing Vuex-based codebase to a lighter, fully type-safe store without dynamic module complexity.
• Composing multiple focused stores that reference one another instead of a single monolithic global state tree.

Under The Hood

Architecture

Pinia is built as a thin, reactivity-driven layer over Vue’s core primitives. createPinia() (in src/createPinia.ts) creates an effectScope and a root ref holding a record of every store’s state, then returns a markRaw Pinia object whose install method provides the instance via app.provide(piniaSymbol, ...) and registers devtools. defineStore (in src/store.ts, the largest module at ~29KB) returns a useStore composable that lazily instantiates the store on first call, caching instances in the Pinia _s map; both options-style stores (state/getters/actions) and setup-style stores collapse into the same reactive store object via reactive, computed, and per-store effectScope. Subscriptions (src/subscriptions.ts), HMR patching (src/hmr.ts), and storeToRefs (src/storeToRefs.ts) layer additional behavior on top of this reactive core.

Tech Stack

The library is written entirely in TypeScript and targets Vue 3.5+ as a peer dependency, pulling in @vue/devtools-api for its devtools bridge. It ships as a pnpm monorepo (packages/pinia, packages/nuxt, packages/testing, packages/docs) and is bundled with tsdown/Rollup into ESM and IIFE outputs, using compile-time __DEV__, __TEST__, and __USE_DEVTOOLS__ flags to strip development-only code from production builds. It is marked sideEffects: false for full tree-shaking.

Code Quality

The codebase is mature and well-tested, with 17 dedicated spec files under packages/pinia/__tests__ covering actions, getters, subscriptions, SSR, HMR, plugins, state patching, and store setup, run under Vitest with v8 coverage. Internal-only types are consistently prefixed with an underscore and marked @internal, public functions carry JSDoc, and the strict TypeScript configuration plus dedicated test-dts type tests guard the public type surface. Naming is precise and the separation between reactivity plumbing and public API is clear.

API Design

Pinia’s public surface is deliberately small and ergonomic: createPinia, defineStore, storeToRefs, the mapX helpers, and acceptHMRUpdate cover nearly all usage. Getting started requires almost no boilerplate — a single store definition is immediately type-safe with no manual generics — and the flat store shape (accessing state and actions directly on the instance) reads naturally. Documentation at pinia.vuejs.org is thorough, and the dual options/setup store styles let teams pick the ergonomics that fit their existing Vue patterns.