vuejs-ai/vue-options-api-best-practices

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

Files11

11 files · 40.0 KB

Select a file to preview

Overall Score

86/100

Grade

A

Excellent

Safety

92

Quality

84

Clarity

88

Completeness

81

Summary

This skill provides comprehensive guidance on Vue 3 Options API best practices, with an emphasis on TypeScript integration. It covers 10 focused reference guides addressing common pitfalls: type inference, method binding, lifecycle hooks, prop typing, and provide/inject limitations. The skill educates developers on using `defineComponent()`, proper type annotations, avoiding arrow functions in lifecycle contexts, and handling stateful methods.

Detected Capabilities

documentation readingcode pattern analysisTypeScript configuration guidanceVue component architecture education

Trigger Keywords

Phrases that MCP clients use to match this skill to user intent.

vue options api typescriptthis binding errorsdefinecomponent setupvue props typingtypescript strict mode vuelifecycle hook typing

Referenced Domains

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

devblogs.microsoft.comdeveloper.mozilla.orggithub.comvuejs.orgwww.typescriptlang.org

Use Cases

Add TypeScript type safety to Vue Options API components
Debug 'this' binding errors in methods and lifecycle hooks
Configure tsconfig.json for proper Vue Options API typing
Type complex props using PropType and interfaces
Understand Vue 3 Options API type inference limitations
Migrate legacy TypeScript code to proper type-safe patterns
Fix circular type inference issues in computed properties

Quality Notes

Comprehensive coverage of Options API TypeScript integration with 10 well-structured reference guides
Each guide includes clear impact ratings and practical code examples showing both incorrect and correct patterns
Strong emphasis on documenting legacy concerns (e.g., TypeScript < 4.7 workarounds) with clear upgrade paths
Excellent use of task checklists to guide developers through implementation steps
Minimal content duplication across guides with appropriate cross-references
Clear section hierarchy with consistent formatting (Bad/Good code blocks, tables, checklists)
All reference files present and properly linked from main skill document
Practical limitations documented (e.g., provide/inject type augmentation workarounds)
Missing explicit edge case guidance for some patterns (e.g., deeply nested component hierarchies)

Model: claude-haiku-4-5-20251001Analyzed: Jul 11, 2026

Reviews

Add this skill to your library to leave a review.

No reviews yet

Be the first to share your experience.

vue-options-api-best-practices