vue-options-api-best-practices

Name: vue-options-api-best-practices
Author: vuejs-ai

github.com/vuejs-aiDevelopment3.2k11.9k installsUpdated 5d ago

About vue-options-api-best-practices

A Vue.js skill covering Options API practices, TypeScript typing, and common pitfalls. It is intended for developers maintaining or writing Options API components.

Key features

01Type inference for component properties
02Type safety for Options API this
03Typed props and event handlers
04Computed property return types
05Lifecycle and method binding practices

Use cases

01Add TypeScript typing to Options API components
02Diagnose typing issues with props or injections
03Prevent incorrect method and lifecycle hook binding

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/vuejs-ai/skills --skill vue-options-api-best-practices

After installing, type/vue-options-api-best-practicesin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

reference/

no-arrow-functions-in-lifecycle-hooks.md

no-arrow-functions-in-methods.md

stateful-methods-lifecycle.md

ts-options-api-arrow-functions-validators.md

ts-options-api-computed-return-types.md

ts-options-api-proptype-complex-types.md

ts-options-api-provide-inject-limitations.md

ts-options-api-type-event-handlers.md

ts-options-api-use-definecomponent.md

ts-strict-mode-options-api.md

Details

From the project README

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

Comments

Markdown supported

Details

Author: vuejs-ai
Repository: vuejs-ai/skills
Category: Development
Installs: 11,869
GitHub stars: 3,199

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

848.6k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.