skills.rest
bahayonghang
bahayonghangCOMMUNITY
Explore all skills by this author →
GitHub

vue-best-practices

Enforce Vue 3 component typing and Volar configuration standards.

16|1|Updated Jan 2, 2026
Search Tags:#typescript#vue#wrapper-components#volar#template-checking#defineProps
One-click install
npx skills add https://github.com/bahayonghang/my-claude-code-settings --skill vue-best-practices-bahayonghang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-best-practices
Source: https://github.com/bahayonghang/my-claude-code-settings/tree/main/skills/vue-best-practices
Command: npx skills add https://github.com/bahayonghang/my-claude-code-settings --skill vue-best-practices-bahayonghang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides clear, actionable guidelines to enforce consistent typing, component structure, and Volar configuration across Vue 3 projects. It helps teams avoid common pitfalls in props, emits, wrapper components, and template checks.

Core Features & Use Cases

  • Typing consistency: Standardized patterns for props, emits, and slots across components.
  • Wrapper component guidance: Correct forwarding of $attrs and events in wrapper components.
  • Template checking: Recommendations for strict template checks with vue-tsc and Volar.
  • Use Case: When refactoring a Vue app, apply these practices to reduce runtime errors and improve editor feedback.

Quick Start

Request guidance by providing a Vue component snippet and project setup; the skill will output a typed pattern and configuration recommendations.

Frequently Asked Questions about vue-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I type Vue 3 component props and emits with TypeScript?▼

Type Vue 3 props and emits using the defineProps and defineEmits compiler macros. This enforces standardized typing patterns across components to reduce runtime errors and improve editor feedback.

What is the best way to forward events and attributes in Vue wrapper components?▼

Forwarding events and attributes in Vue wrapper components requires specific wrapper forwarding patterns. Applying these robust patterns ensures correct attribute pass-through and event delegation while maintaining strict TypeScript typing standards.

How do I configure strict template type checking with vue-tsc and Volar?▼

Configure strict template type checking by setting up vue-tsc and the Vue Language Tools. This enables Volar to perform rigorous template checks across Vue projects, catching type errors directly inside templates.

Does this Vue TypeScript guidance apply to refactoring existing projects?▼

Yes, this guidance applies directly to refactoring existing Vue projects. You can request best-practice guidance by providing a Vue component snippet and project setup to output typed patterns and configuration recommendations for your codebase.

Why should I use defineProps instead of standard TypeScript interfaces in Vue 3?▼

Using defineProps instead of standard TypeScript interfaces ensures compiler-level type inference for Vue 3 props. This enforces consistent typing standards and enables Volar to provide accurate template type checking and editor feedback.

Related Skills

Explore More Software Engineering Skills→
peterWang123589peterWang123589

vue-best-practices

Enforce Vue 3 and TypeScript best practices across Vue components.

Community
Advanced
DwsyDwsy
18

vue-best-practices

Enforce type-safe Vue 3 components by validating props and template usage.

Community
Advanced
kingsonseangkingsonseang

vue-best-practices

Enforce Vue 3 typing best practices across components with Volar.

Community
Advanced
AloisHAloisH

vue-best-practices

Enforce Vue 3 typing and Volar best practices for component authoring.

Community
Basic