vue-best-practices

Name: vue-best-practices
Availability: InStock
Author: Jason

Align Volar configurations and Vue tooling for consistent Vue 3 component typing.

340|38|Updated May 17, 2025

Search Tags:#typescript #vue #props #wrapper-components #volar #vue-tsc #template-checking

Ready to run

npx skills add https://github.com/jasonjgardner/blockbench-mcp-plugin --skill vue-best-practices-jasonjgardner

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vue-best-practices
Source: https://github.com/jasonjgardner/blockbench-mcp-plugin/tree/main/.agents/skills/vue-best-practices
Command: npx skills add https://github.com/jasonjgardner/blockbench-mcp-plugin --skill vue-best-practices-jasonjgardner

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent typing in Vue 3 components and misaligned Volar configurations can lead to runtime errors and poor editor assistance during development, reviews, and refactoring.

Core Features & Use Cases

Explicit Props/Emits Typing: guidance on using defineProps, defineEmits, and helper types to derive prop and event types.
Template Type Checking: recommendations to enable strictTemplates and checkUnknownComponents/Props/Events.
Wrapper Components & Fallthrough: best practices for forwarding attributes safely and maintaining type safety across component wrappers.

Quick Start

Provide a practical, step-by-step guide to applying Vue 3 typing best practices (props, emits, wrapper components, and Volar configuration) to a real component.

Frequently Asked Questions about vue-best-practices

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

FAQPage Schema

How do I configure strict template type checking in Vue 3?▼

To configure strict template type checking in Vue 3, enable the strictTemplates option within vueCompilerOptions. This ensures Volar validates component props, events, and unknown elements in templates.

What is the best way to define types for Vue component props and emits?▼

The best way to define types for Vue 3 component props and emits is by using the defineProps and defineEmits compiler macros with TypeScript helper types. This derives explicit prop and event types for Volar assistance.

How do I forward attributes safely in Vue wrapper components?▼

To forward attributes safely in Vue wrapper components, apply fallthroughAttributes best practices to maintain type safety across wrappers. This prevents inconsistent typing and runtime errors during refactoring.

Why does Volar show type errors for unknown components in my Vue templates?▼

Volar shows type errors for unknown components because template type checking is enabled via vueCompilerOptions. Using checkUnknownComponents validates template elements against your TypeScript definitions.

Can I use vue-tsc to check Vue 3 component template types?▼

Yes, you can use vue-tsc to check Vue 3 component template types. It leverages Volar configurations like strictTemplates to validate props, emits, and unknown components during compilation.