pinia

Name: pinia
Author: antfu

Type-safe Vue state management with intuitive store patterns and first-class TypeScript support. Supports both Options API and Composition API styles, with built-in devtools integration for debugging Core capabilities include defining stores with state, getters, actions, subscriptions, and store-to-store composition Extensible via plugins to add custom properties and behavior across stores Includes testing utilities via @pinia/testing for mocking and stubbing, plus SSR and Nuxt integration with state hydration Hot module replacement support for seamless development workflow

INSTALLATION

npx skills add https://github.com/antfu/skills --skill pinia

Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

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 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/testing** for component tests with mocked stores