Vue Options Api Best Practices
vuejs-ai/skills1.9k
This skill provides best practices and guidance for using Vue.js Options API with TypeScript, covering topics like type inference, event safety, props typing, and lifecycle hooks. It offers detailed solutions to common issues such as method binding, data access in lifecycle hooks, and managing complex computed properties, making it ideal for Vue developers working with the Options API and TypeScript. The skill helps ensure robust, type-safe Vue applications for both new and experienced Vue.js developers.
Vue.js Options API best practices, TypeScript integration, and common gotchas.
TypeScript
- Need to enable TypeScript type inference for component properties → See ts-options-api-use-definecomponent
- Enabling type safety for Options API this context → See ts-strict-mode-options-api
- Using old TypeScript versions with prop validators → See ts-options-api-arrow-functions-validators
- Event handler parameters need proper type safety → See ts-options-api-type-event-handlers
- Need to type object or array props with interfaces → See ts-options-api-proptype-complex-types
- Injected properties missing TypeScript types completely → See ts-options-api-provide-inject-limitations
- Complex computed properties lack clear type documentation → See ts-options-api-computed-return-types
Methods & Lifecycle
- Methods aren't binding to component instance context → See no-arrow-functions-in-methods
- Lifecycle hooks losing access to component data → See no-arrow-functions-in-lifecycle-hooks
- Debounced functions sharing state across component instances → See stateful-methods-lifecycle
GitHub Owner
Owner: vuejs-ai
Files
ts-options-api-use-definecomponent
ts-strict-mode-options-api
ts-options-api-arrow-functions-validators
ts-options-api-type-event-handlers
ts-options-api-proptype-complex-types
ts-options-api-provide-inject-limitations
ts-options-api-computed-return-types
no-arrow-functions-in-methods
no-arrow-functions-in-lifecycle-hooks
stateful-methods-lifecycle
SKILL.md
name: vue-options-api-best-practices description: "Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only." version: 2.0.0 license: MIT author: github.com/vuejs-ai
Vue.js Options API best practices, TypeScript integration, and common gotchas.
TypeScript
- Need to enable TypeScript type inference for component properties → See ts-options-api-use-definecomponent
- Enabling type safety for Options API this context → See ts-strict-mode-options-api
- Using old TypeScript versions with prop validators → See ts-options-api-arrow-functions-validators
- Event handler parameters need proper type safety → See ts-options-api-type-event-handlers
- Need to type object or array props with interfaces → See ts-options-api-proptype-complex-types
- Injected properties missing TypeScript types completely → See ts-options-api-provide-inject-limitations
- Complex computed properties lack clear type documentation → See ts-options-api-computed-return-types
Methods & Lifecycle
- Methods aren't binding to component instance context → See no-arrow-functions-in-methods
- Lifecycle hooks losing access to component data → See no-arrow-functions-in-lifecycle-hooks
- Debounced functions sharing state across component instances → See stateful-methods-lifecycle