vuejs/pinia

Pinia is a state management library for applications built with Vue, the popular JavaScript framework for building user interfaces. A state management library is a piece of code that holds shared data, such as the current user, items in a shopping cart, or open notifications, in one place so any part of the app can read it or update it consistently. Pinia is the official replacement for Vuex, the older state library used by Vue projects. The project advertises itself as intuitive, type safe, light, extensible, modular by design, and supported by browser devtools. There is also a dedicated Nuxt module, where Nuxt is a higher-level framework built on top of Vue. The current version targets Vue 3, while a separate v2 branch keeps support for Vue 2. The name Pinia comes from piña, the Spanish word for pineapple, with the analogy that small stores join together the way the flowers of a pineapple do. Using Pinia involves installing it from npm and then creating a root store with createPinia, which gets attached to the Vue app at startup. From there, developers define one store per file with defineStore, giving it a unique name and three optional pieces: state, which is the initial data, getters, which are computed values derived from state, and actions, which are functions that change the state. Inside a component, calling the generated useMainStore function returns the store instance. A helper called storeToRefs lets you pull out individual reactive properties while keeping them reactive. The README points to the official documentation site for deeper guides, including server-side rendering setup and Nuxt configuration. Pinia is released under the MIT license and is maintained inside the vuejs GitHub organization.