vue-pinia-best-practices

Summary

This skill provides a curated collection of Pinia state management best practices and common gotchas for Vue 3 developers. It covers critical patterns including proper store initialization timing, reactivity preservation through storeToRefs, method binding in templates, and architectural decisions about when to use Pinia vs hand-rolled solutions. The skill is structured as a reference index with six detailed implementation guides, each addressing specific pain points with code examples and explanations.

Detected Capabilities

Trigger Keywords

Phrases that agents use to match this skill to user intent.

Referenced Domains

External domains referenced in skill content, detected by static analysis.

Use Cases

• Fix 'No Active Pinia' initialization errors in Vue 3 projects
• Debug reactivity issues when destructuring Pinia stores in components
• Resolve method binding problems in hand-rolled reactive stores
• Decide between Pinia and custom state solutions for application architecture
• Implement shareable, bookmarkable filter state using URL parameters
• Set up Pinia stores correctly for SSR and DevTools integration

Quality Notes

• Comprehensive coverage of six high-impact Pinia gotchas with clear problem → solution structure
• Each reference guide includes practical code examples showing both wrong and correct patterns
• Strong use of task checklists and visual tables to support quick scanning and implementation
• Excellent external references linking to official Vue/Pinia documentation and community resources
• Well-documented comparisons (e.g., URL vs store state, Vuex vs Pinia) that help developers make architectural decisions
• Clear impact ratings (HIGH/MEDIUM) help developers prioritize which patterns matter most
• Setup store guide correctly emphasizes the SSR/DevTools consequences of omitting state from returns
• Includes debugging checklists and alternative patterns to address edge cases