vue-best-practices

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

18|3|Updated Jan 8, 2026
One-click install
npx skills add https://github.com/Dwsy/agent --skill vue-best-practices-dwsy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vue-best-practices
Source: https://github.com/Dwsy/agent/tree/main/skills/vue-best-practices
Command: npx skills add https://github.com/Dwsy/agent --skill vue-best-practices-dwsy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vue components often suffer from loose typing and template errors that slip through during development; this skill provides a structured set of best practices to help enforce type safety and reliable templates across Vue 3 projects.

Core Features & Use Cases

  • Enforce type-safe props, emits, and slots extraction guidance for wrapper components and props typing.
  • Enable strict template checking, proper component typing, and Volar configuration compatibility across editors.
  • Improve maintenance and onboarding by documenting consistent patterns for data attributes, CSS modules, and routing types in Vue apps.

Quick Start

Run an audit of a Vue 3 project to surface typing and template issues across components and wrappers.

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 strict template checking in Vue 3 components?

You enforce strict template checking by validating Volar configuration and applying rules like vue-tsc-strict-templates to catch template errors and ensure type safety across your project.

What is the best way to extract type-safe props for Vue wrapper components?

To extract type-safe props for Vue wrapper components, apply the extract-component-props rule, which provides structured typing guidance for props, emits, and slots extraction.

Does Volar support type checking for Vue 3 fallthrough attributes?

Yes, Volar supports type checking for Vue 3 fallthrough attributes by enforcing proper component typing and validating fallthroughAttributes rules across your editor configuration.

How do I configure bundler moduleResolution settings for Vue 3 type safety?

To configure bundler moduleResolution settings for Vue 3 type safety, ensure compatibility between Volar and bundler settings, validating that strict template checks and component typing align across the project.

Why does my Vue 3 template type checking fail with TypeScript?

Your Vue 3 template type checking fails with TypeScript when Volar configuration is missing or strict template checks are not applied, allowing loose typing and template errors to slip through during development.