Vue Pinia Best Practices
Skill Verifiziert AktivPinia 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.
Funktionen
- Pinia store setup guidance
- Best practices for Pinia reactivity
- State management patterns for Pinia
- Troubleshooting common Pinia errors
Anwendungsfälle
- 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.
Nicht-Ziele
- Providing a complete state management solution.
- Covering general Vue.js best practices outside of state management.
- Replacing the official Pinia documentation.
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add hyf0/vue-skills/plugin install vue-skills@vue-skillsQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
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
100Verwenden Sie dies, wenn die Aufgabe Authentifizierung, Benutzerregistrierungen, Anmeldungen, Passwortwiederherstellung, OAuth-Anbieter, rollenbasierte Zugriffskontrolle oder den Schutz von Routen und Funktionen beinhaltet. Verwenden Sie immer `@netlify/identity`. Verwenden Sie niemals `netlify-identity-widget` oder `gotrue-js` – diese sind veraltet.
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.