pinia

Pinia is the official, type-safe state management library for Vue.js, designed to be intuitive and scalable for modern application architectures. This skill provides an agent with deep domain knowledge of Pinia's core patterns, including the use of both Options API and Composition API store styles. It assists developers in structuring global application state, handling complex business logic, and ensuring seamless integration with Vue's reactivity system.

The skill enables the agent to act as a technical consultant for Vue developers, helping them optimize state management patterns, resolve circular dependencies in store-to-store communication, and implement advanced features like plugins and server-side rendering (SSR) hydration. Whether you are migrating from Vuex, building a large-scale Nuxt application, or unit testing individual stores, this skill provides the necessary context to maintain clean, maintainable, and testable code.

• Define Pinia stores using either defineStore (Setup or Options syntax) with full TypeScript support.

• Leverage storeToRefs() to maintain reactivity when destructuring state and getters.

• Manage side effects, asynchronous actions, and complex business logic inside stores.

• Integrate VueUse composables and internal Vue reactivity tools directly into store logic.

• Implement store plugins to extend functionality with custom properties or state persistence.

• Configure SSR-friendly state hydration and HMR (Hot Module Replacement) for development.

• Best practice: Prefer Setup Stores for complex logic, watchers, and dependency injection.

• Best practice: Keep stores modular; avoid creating one giant global store.

• Usage: Use @pinia/testing for unit testing components that consume stores, utilizing mocking and stubbing where appropriate.

• Constraints: Ensure all store actions are called inside setup functions or components; avoid calling stores at the module scope, especially in SSR environments.

• Inputs/Outputs: The agent expects context regarding Vue components, store definitions, or architectural requirements and will output optimized code, configuration snippets, and architectural recommendations.