skills.rest
IsKenKenYa
IsKenKenYaCOMMUNITY
Explore all skills by this author →
GitHub

vue-best-practices

Fix Vue 3 and TypeScript typing, template-checking, and tooling misconfigurations.

Updated May 11, 2026
Search Tags:#typescript#vue#component props#tsconfig#volar#vue-tsc#template type checking
One-click install
npx skills add https://github.com/IsKenKenYa/Commory --skill vue-best-practices-iskenkenya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-best-practices
Source: https://github.com/IsKenKenYa/Commory/tree/main/.agents/skills/vue-best-practices
Command: npx skills add https://github.com/IsKenKenYa/Commory --skill vue-best-practices-iskenkenya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Vue projects often lose type safety and editor reliability due to misconfigured TypeScript/Vue compiler options, missing Volar settings, or incorrect patterns in component props, templates, wrappers, and CSS modules.

Core Features & Use Cases

  • Extract Component Props Safely: Derive strongly typed props, emits, slots, and exposed types from .vue components (including wrapper component patterns) to avoid brittle or incorrect type extraction.
  • Harden Template Type Checking: Enable strict template checks to catch undefined components, unknown props, and other template issues at compile time.
  • Fix Common Volar/Vue Tooling Pitfalls: Resolve frequent editor/type-check failures such as Volar 3 upgrade breakage, moduleResolution bundler migration errors, and template typing edge cases like defineModel undefined updates, withDefaults union default warnings, and numeric deep watch behavior.
  • Performance & Developer Productivity: Reduce slow save times and HMR issues in Vue SSR setups, and improve IDE autocomplete via fallthrough attribute typing and strict CSS modules.

Quick Start

Use vue-best-practices when you’re implementing or refactoring a Vue component with TypeScript and want the right tsconfig/vueCompilerOptions and Volar-compatible typing patterns without template or prop typing regressions.

Frequently Asked Questions about vue-best-practices

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

FAQPage Schema
How do I extract component props and emits types safely in Vue 3 with TypeScript?▼

To extract component props and emits types safely in Vue 3, use Volar-compatible typing patterns for wrapper components. This prevents brittle type extraction by deriving strongly typed props, emits, and slots directly from .vue files without regressions.

Why does vue-tsc fail to type check my Vue 3 templates after upgrading Volar?▼

vue-tsc template type checking fails after a Volar 3 upgrade due to misconfigured Vue Language Tools compiler options or moduleResolution bundler migration errors. You must align tsconfig and vueCompilerOptions to restore editor reliability.

What is the best way to enable strict template type checking for Vue components?▼

The best way to enable strict template type checking is configuring strictTemplates in your Vue compiler options. This catches undefined components and unknown props at compile time, ensuring type-safe Vue 3 components with Volar.

How do I fix withDefaults union default warnings in Vue 3 TypeScript components?▼

To fix withDefaults union default warnings in Vue 3 TypeScript components, you must apply specific TypeScript patterns that satisfy strict typing constraints. This resolves template typing edge cases and prevents editor diagnostic failures.

Can I use Volar to improve IDE autocomplete for fallthrough attributes and CSS modules?▼

Yes, you can use Volar to improve IDE autocomplete for fallthrough attributes and strict CSS modules. Applying correct Vue Language Tools settings ensures type-safe behavior and reduces slow save times in Vue SSR setups.

Does vue-tsc support type checking for defineModel updates when the value is undefined?▼

vue-tsc type checking handles defineModel undefined updates by enforcing strict TypeScript patterns. Configuring the correct vueCompilerOptions ensures these template typing edge cases are caught without breaking editor reliability.

Related Skills

Explore More Software Engineering Skills→
kingsonseangkingsonseang

vue-best-practices

Enforce Vue 3 typing best practices across components with Volar.

Community
Advanced
oyjtoyjt
624

vue-best-practices

Enforce Vue 3 typing best practices for components and templates.

Community
Advanced
kunhai-88kunhai-88

vue-best-practices

Configure Vue 3 and TypeScript projects with type-safe props and Volar tooling.

Community
Intermediate
bahayonghangbahayonghang
16

vue-best-practices

Enforce Vue 3 component typing and Volar configuration standards.

Community
Basic