agent skill Official page
⌘ Pinia
Pinia state management best practices for type-safe Vue stores, getters, and actions.
Pinia agent skill overview
This MCP Server Hub listing collects the source repository, setup notes, feature summary, and README details for Pinia. Use it to decide whether this agent skill fits your AI assistant workflow before installing it locally or connecting it to a compatible client.
Listing type
agent skill
Directory
MCP Server HubOfficial reference
https://raw.githubusercontent.com/antfu/skills/main/skills/pinia/SKILL.mdMCP basics
What is an MCP server?name: pinia description: Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps. metadata: author: Anthony Fu version: "2026.1.28" source: Generated from https://github.com/vuejs/pinia, scripts located at https://github.com/antfu/skills
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/testingfor component tests with mocked stores