Vue Pinia Best Practices
Skill Verified ActivePinia stores, state management patterns, store setup, and reactivity with stores.
To help developers correctly set up Pinia stores, manage state reactively, and follow best practices to avoid common issues in Vue.js applications.
Features
- Pinia store setup guidance
- Best practices for Pinia reactivity
- State management patterns for Pinia
- Troubleshooting common Pinia errors
Use Cases
- When encountering 'getActivePinia was called' errors.
- When store state is missing in DevTools or SSR.
- When store destructuring breaks UI reactivity.
- When needing to manage complex state shared across an application.
Non-Goals
- Providing a complete state management solution.
- Covering general Vue.js best practices outside of state management.
- Replacing the official Pinia documentation.
Installation
First, add the marketplace
/plugin marketplace add hyf0/vue-skills/plugin install vue-skills@vue-skillsQuality Score
VerifiedTrust Signals
Similar Extensions
Vue Router Best Practices
100Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
Deepinit
100Deep codebase initialization with hierarchical AGENTS.md documentation
Cleanup Cycles
100Detect and untangle circular dependencies. Runs madge/skott (TS), pycycle (Py), or compiler-only checks (Go/Rust). Auto-fixes leaf-extractable cycles; reports core cycles for human review. Use when the user asks to find circular imports, fix dependency cycles, or untangle module graph. Example queries — "find circular imports", "fix dependency cycles", "untangle our module graph", "why is madge complaining".
Netlify Identity
100Use when the task involves authentication, user signups, logins, password recovery, OAuth providers, role-based access control, or protecting routes and functions. Always use `@netlify/identity`. Never use `netlify-identity-widget` or `gotrue-js` — they are deprecated.
Sentry React Router Framework Sdk
100Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.
Create Adaptable Composable
100Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()/toRef() inside reactive effects (watch/watchEffect) to keep behavior predictable and reactive. Use this skill when user asks for creating adaptable or reusable composables.