pinia

Pinia Pinia is the official state management library for Vue, designed to be intuitive and type-safe. It supports both Options API and Composition API styles, with first-class TypeScript support and devtools integration. The skill is based on Pinia v3.0.4, generated at 2026-01-28. Core References Topic Description Reference Stores Defining stores, state, getters, actions, storeToRefs, subscriptions core-stores Features Extensibility Topic Description Reference Plugins Extend stores with custom properties, state, and behavior features-plugins Composability Topic Description Reference Composables Using Vue composables within stores (VueUse, etc.) features-composables Composing Stores Store-to-store communication, avoiding circular dependencies features-composing-stores Best Practices Topic Description Reference Testing Unit testing with @pinia/testing, mocking, stubbing best-practices-testing Outside Components Using stores in navigation guards, plugins, middlewares best-practices-outside-component Advanced Topic Description Reference SSR Server-side rendering, state hydration advanced-ssr Nuxt Nuxt integration, auto-imports, SSR best practices advanced-nuxt HMR Hot module replacement for development advanced-hmr Key Recommendations Prefer Setup Stores for complex logic, composables, and watchers Use storeToRefs() when destructuring state/getters to preserve reactivity Actions can be destructured directly - they're bound to the store Call stores inside functions not at module scope, especially for SSR Add HMR support to each store for better development experience Use @pinia/testing for component tests with mocked stores