vue-best-practices

Enforce Vue 3 TypeScript prop, emit, and slot typing with Volar settings.

Updated Jan 11, 2026
One-click install
npx skills add https://github.com/UmmItKin/ummit.dev --skill vue-best-practices-ummitkin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vue-best-practices
Source: https://github.com/UmmItKin/ummit.dev/tree/main/.agents/skills/vue-best-practices
Command: npx skills add https://github.com/UmmItKin/ummit.dev --skill vue-best-practices-ummitkin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vue development teams often struggle to consistently apply typing and tooling best practices across components, leading to inconsistent code and subtle bugs.

Core Features & Use Cases

  • Guided typing patterns for props, emits, and slots using defineProps/defineEmits.
  • Volar and vue-tsc alignment with strict templates and recommended settings to catch errors early.
  • Wrapper component best practices for passing through attributes and types safely.
  • Real-world scenario: During refactoring, you can consult the guidelines to ensure type-safe component composition.

Quick Start

Provide a simple prompt: "Apply vue-best-practices to my Vue component to ensure proper prop typing, template checks, and Volar configuration."

Frequently Asked Questions about vue-best-practices

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

FAQPage Schema
How do I enforce Vue 3 TypeScript best practices for prop typing and emits?

To enforce Vue 3 TypeScript best practices, use defineProps and defineEmits with guided typing patterns to ensure type-safe component composition. This approach aligns with Volar settings to catch errors early during component development.

What is the best way to configure Volar and vue-tsc for strict template checking?

Configuring Volar and vue-tsc for strict template checking involves aligning your project with recommended settings to catch template errors early. This configuration ensures reliable code by validating types directly within your Vue templates.

How do I handle wrapper component attribute passing safely in Vue?

Handling wrapper component attribute passing safely requires following specific wrapper component best practices to pass through attributes and types accurately. This ensures type-safe component composition without introducing subtle bugs during refactoring.

Does this Vue TypeScript guide support type checking for component slots?

Yes, this Vue TypeScript guide supports type checking for component slots by providing guided typing patterns specifically designed for slots. It helps maintain consistent typing and prevents subtle bugs across your Vue components.

Why does my Vue TypeScript code have inconsistent typing and subtle bugs?

Inconsistent Vue TypeScript code and subtle bugs often occur when teams struggle to consistently apply typing and tooling best practices across components. Applying standardized patterns for props and emits resolves these inconsistencies.

When do I need strict template checks during Vue component refactoring?

You need strict template checks during Vue component refactoring to ensure type-safe component composition and verify proper prop typing. Consulting guidelines for Volar alignment helps prevent introducing errors when restructuring code.