← Back to archive

Repo of the Day

vuejs/pinia

Published: Feb 23, 2022

Open repository ↗

Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support

Summary

Pinia is a state management library for Vue applications, written in TypeScript and released under the MIT license. The README describes it as the successor to Vuex, built around the Vue Composition API with Vue DevTools support. The repository hosts the core pinia package, which wires into a Vue 3 app in a few lines of code.

What it is useful for

Pinia gives Vue apps a central place to keep state that multiple components need to share, replacing ad-hoc patterns like prop drilling or shared reactive singletons. The README positions it as type safe, light, modular, and extensible, with a dedicated Nuxt module. The repository topics also list ssr, indicating it is intended for server-rendered Vue and Nuxt projects as well as client-side ones. A documented limitation is that Pinia does not support dynamic modules; the project FAQ explains this is intentional because dynamic modules are not type safe, and instead recommends defining separate stores that can be imported anywhere.

How engineers can use it

The README documents an installation command that pulls in the store plus the devtools API bridge:

npm install pinia @vue/devtools-api

After installing, a root store is created with createPinia() and registered on the Vue app via app.use(pinia). Individual stores are defined with defineStore(name, options), where the options include a state factory function, optional getters, and optional actions. The README's example shows a "main" store holding a counter and a name, with a doubleCounter getter and a reset action that uses this to mutate state.

Inside a component, the store is accessed by calling the function returned from defineStore inside setup(), and storeToRefs is used to destructure state and getters while keeping them reactive. For framework-specific configuration, the README points to the official Pinia documentation. Two runnable examples are also linked: a Vue 3 + Vite demo and a Nuxt 3 demo, both on StackBlitz.

Engineers on Vue 2 should note that the main branch targets Vue 3 only, and a separate v2 branch is maintained for Vue 2 compatibility.