Can this skill help with debounced methods in Vue?

Yes, it includes guidance on implementing stateful methods correctly to ensure that debounced or throttled functions do not share state across multiple component instances.

How does this skill help with TypeScript in Vue?

It provides specific patterns for using defineComponent, PropType, and explicit return types to ensure full type safety within the Options API's unique 'this' context.

Does this skill support the Vue 3 Composition API?

No, this skill is specifically designed to provide best practices for the Options API pattern (data, methods, and lifecycle hooks) within Vue 3 environments.

Why does this skill discourage arrow functions in Vue methods?

Arrow functions bind 'this' lexically to the parent context rather than the component instance, which prevents access to data and other methods. This skill helps identify and fix these instances.

Vue Options API Best Practices

Name: Vue Options API Best Practices
Author: vuejs-ai

byvuejs-ai

•

1,280

開発者ツール

Standardizes Vue 3 development using the Options API pattern with robust TypeScript support and lifecycle management.

概要

This skill equips Claude with specialized knowledge for building Vue 3 applications using the traditional Options API, ensuring strict TypeScript type safety and proper component lifecycle handling. It provides expert guidance on avoiding common pitfalls like context binding errors with arrow functions, managing stateful methods for debouncing, and implementing complex PropType definitions. It is particularly useful for developers maintaining established Vue codebases or those who prefer the structured Options API pattern while requiring modern TypeScript integration.

主な機能

Advanced PropType and interface definitions for complex component properties
Stateful method patterns to prevent shared state across component instances
1,280 GitHub stars
Type-safe event handler implementation and computed property documentation
Strict TypeScript type inference via defineComponent and strict mode configuration
Proper 'this' context binding for methods and lifecycle hooks

ユースケース

Modernizing Vue 2 codebases to Vue 3 while retaining the Options API structure
Implementing strict TypeScript type checking within an Options API project
Debugging and fixing 'this' context issues in component methods or lifecycle hooks

概要

主な機能

Advanced PropType and interface definitions for complex component properties
Stateful method patterns to prevent shared state across component instances
1,280 GitHub stars
Type-safe event handler implementation and computed property documentation
Strict TypeScript type inference via defineComponent and strict mode configuration
Proper 'this' context binding for methods and lifecycle hooks

ユースケース

Modernizing Vue 2 codebases to Vue 3 while retaining the Options API structure
Implementing strict TypeScript type checking within an Options API project
Debugging and fixing 'this' context issues in component methods or lifecycle hooks