About pinia
A Pinia skill offering references and recommendations for managing state in Vue applications. It covers stores, plugins, composability, testing, SSR, Nuxt, and hot module replacement, with TypeScript and devtools support described in the source.
Key features
- 01Store definitions, state, getters, and actions
- 02Plugins and store composition
- 03Testing and use outside components
- 04SSR, Nuxt, and HMR guidance
- 05Recommendations for reactive store usage
Use cases
- 01Structuring state in a Vue application
- 02Composing stores and using composables
- 03Testing stores with mocked state
- 04Managing stores in Nuxt or SSR
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/piniain Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
GENERATION.mdreferences/advanced-hmr.mdadvanced-nuxt.mdadvanced-ssr.mdbest-practices-outside-component.mdbest-practices-testing.mdcore-stores.mdfeatures-composables.mdfeatures-composing-stores.mdfeatures-plugins.mdDetails
From the project READMEPinia
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 v4.0.3, generated at 2026-09-25.
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
Comments
Markdown supported