vue-pinia-best-practices — skill for Claude Code: Pinia state
A skill covering Pinia best practices: avoid common store setup errors, preserve reactivity, and organize state management patterns in Vue projects.
npx skills add vuejs-ai/skills --skill vue-pinia-best-practices -a claude-codeWhat vue-pinia-best-practices does
This skill gathers typical Pinia pitfalls and shows how to handle them. Inside: guidance on setup stores, reactivity with destructuring, template method binding, and filter state management. Each issue points to detailed explanations—for example, if destructuring breaks reactivity, the skill directs you to the correct approach.
The skill includes patterns for large apps with DevTools and best practices to keep code predictable and easier to scale.
What it helps with
- Avoid getActivePinia was called error on startup
- Preserve reactivity when destructuring a store
- Configure setup stores so DevTools sees all state
- Call store methods correctly from templates
- Manage filters and ephemeral state properly
Example prompts for the agent
- Why does UI stop updating when I destructure the store?
- How do I set up Pinia for a production app with DevTools?
- I get getActivePinia was called on init — what's wrong?
How to install vue-pinia-best-practices
1Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-pinia-best-practices -a claude-code2Manually: put the files in place
~/.claude/skills/vue-pinia-best-practices/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/vue-pinia-best-practices/
1Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-pinia-best-practices -a codex2Manually: put the files in place
.agents/skills/vue-pinia-best-practices/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-pinia-best-practices -a cursor2Manually: put the files in place
.cursor/skills/vue-pinia-best-practices/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install vuejs-ai/skills vue-pinia-best-practices2Manually: put the files in place
.github/skills/vue-pinia-best-practices/SKILL.md1Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-pinia-best-practices -a gemini-cli2Platform CLI
gemini skills install https://github.com/vuejs-ai/skills --path skills/vue-pinia-best-practicesManually: put the files in place
.devin/skills/vue-pinia-best-practices/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-pinia-best-practices -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
From the same set3
The whole set →Similar
Questions about vue-pinia-best-practices
How do I install vue-pinia-best-practices in Claude Code?
Run npx skills add vuejs-ai/skills --skill vue-pinia-best-practices -a claude-code, then open ~/.claude/skills/vue-pinia-best-practices/SKILL.md.
What is vue-pinia-best-practices?
A skill with Pinia best practices for Vue 3. It covers store setup, reactivity, method binding, and state management patterns.
When should I bind reactively to a store, and when can I destructure?
Destructuring a store breaks reactivity. To keep reactivity in a template, either use the store directly (store.count) or wrap it in computed() in your script.
Source text
SKILL.md · MIT
--- name: vue-pinia-best-practices description: "Pinia stores, state management patterns, store setup, and reactivity with stores." version: 1.0.0 license: MIT author: github.com/vuejs-ai --- Pinia best practices, common gotchas, and state management patterns. ### Store Setup - Getting "getActivePinia was called" error at startup → See [pinia-no-active-pinia-error](reference/pinia-no-active-pinia-error.md) - Setup stores missing state in DevTools or SSR → See [pinia-setup-store-return-all-state](reference/pinia-setup-store-return-all-state.md) ### Reactivity - Store destructuring stops updating UI reactively → See [pinia-store-destructuring-breaks-reactivity](reference/pinia-store-destructuring-breaks-reactivity.md) - Store methods lose context in template calls → See [store-method-binding-parentheses](reference/store-method-binding-parentheses.md) ### State Patterns - Filters reset on refresh or can't be shared → See [state-url-for-ephemeral-filters](reference/state-url-for-ephemeral-filters.md) - Building production app without DevTools or conventions → See [state-use-pinia-for-large-apps](reference/state-use-pinia-for-large-apps.md)
© github.com/vuejs-ai · MIT · vuejs-ai/skills
