Vue Pinia Best Practices

Covers the stuff that trips up most Vue developers when they first adopt Pinia, like destructuring breaking reactivity and the dreaded "getActivePinia was called" error. Each pattern links to a specific gotcha with the fix, from setup store DevTools visibility to why your store methods need parentheses in templates. The URL state guidance is solid if you're dealing with filters that should survive page refreshes. This is less about teaching Pinia from scratch and more about skipping the Stack Overflow detours when you hit the common pain points.

skills.sh installs: 2.8K
GitHub stars: 2.7K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add hyf0/vue-skills --skill vue-pinia-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

Pinia best practices, common gotchas, and state management patterns.

Store Setup

Getting "getActivePinia was called" error at startup → See pinia-no-active-pinia-error
Setup stores missing state in DevTools or SSR → See pinia-setup-store-return-all-state

Reactivity

Store destructuring stops updating UI reactively → See pinia-store-destructuring-breaks-reactivity
Store methods lose context in template calls → See store-method-binding-parentheses

State Patterns

Filters reset on refresh or can't be shared → See state-url-for-ephemeral-filters
Building production app without DevTools or conventions → See state-use-pinia-for-large-apps

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly