Vue Options Api Best Practices
Skill Verifiziert AktivVue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only.
To help developers correctly implement Vue 3 applications using the Options API, particularly when integrating TypeScript, by providing best practices and solutions to common pitfalls.
Funktionen
- Vue 3 Options API best practices
- TypeScript integration for Options API
- Guidance on `this` context and component instance
- Solutions for common lifecycle and method gotchas
- Type safety for computed properties and event handlers
Anwendungsfälle
- When integrating TypeScript into a Vue 3 Options API project
- When encountering issues with `this` context in Vue 3 Options API methods or lifecycle hooks
- When seeking optimal patterns for computed properties and event handlers with type safety
- When debugging unexpected behavior related to component instance data in Options API components
Nicht-Ziele
- Providing guidance for Vue 3 Composition API
- Covering general Vue.js ecosystem tools beyond the Options API
- Addressing advanced state management patterns outside of standard Options API properties
- Offering solutions for JSX in Vue or Vue Router specific issues
Practical Utility
- info:Usage examplesWhile the README shows examples for other skills, the `vue-options-api-best-practices` skill itself does not have specific end-to-end usage examples demonstrating its application.
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.