skills.rest
yaomindong1996
yaomindong1996COMMUNITY
Explore all skills by this author →
GitHub

vue-best-practices

Resolve Vue 3 TypeScript typing errors and Volar configuration issues.

103|36|Updated Mar 30, 2026
Search Tags:#typescript#best practices#frontend#type checking#component development#vue 3#volar
One-click install
npx skills add https://github.com/yaomindong1996/forge-admin --skill vue-best-practices-yaomindong1996
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-best-practices
Source: https://github.com/yaomindong1996/forge-admin/tree/main/forge-admin-ui/.qoder/skills/vue-best-practices
Command: npx skills add https://github.com/yaomindong1996/forge-admin --skill vue-best-practices-yaomindong1996

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves common pain points when working with Vue 3 and TypeScript, including undefined component errors in templates, incorrect prop typing, Volar configuration issues, and inefficient array watching that lead to runtime errors and poor developer experience.

Core Features & Use Cases

  • Type-Safe Component Development: Extract props, emits, and slots types from .vue components correctly, avoid common typing mistakes like using InstanceType for prop extraction.
  • Compile-Time Error Prevention: Catch undefined components, invalid props, and CSS module class name typos at build time with strict template and CSS module checking.
  • Tooling & Workflow Fixes: Resolve Volar 3 upgrade issues, Vite SSR HMR problems, Pinia store mocking errors, Vue Router typed params narrowing issues, and slow VSCode save times in large Vue projects.
  • Use Case: Use this Skill when building a Vue 3 enterprise admin system like forge-admin to ensure all components follow type-safe best practices, avoid build and runtime errors, and maintain consistent code quality across the team.

Quick Start

Use the vue-best-practices skill to review your Vue 3 component's prop types and enable strict template checking in your tsconfig to catch undefined component errors before runtime.

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 Vue 3 component props and emits types safely in TypeScript?▼

Ensure type-safe Vue 3 component development by correctly extracting props, emits, and slots types from .vue components, avoiding common mistakes like using InstanceType for prop extraction.

Why does my Vue 3 template show undefined component errors during build?▼

Undefined component errors in Vue 3 templates occur when strict template type checking is not enabled. Configure your tsconfig and Volar to catch undefined components and invalid props at compile time.

How do I fix Volar configuration issues and slow VSCode save times in large Vue projects?▼

Resolve Volar configuration issues and slow VSCode save times by applying tooling and workflow fixes, including addressing Volar 3 upgrade problems and optimizing large Vue project configurations.

Does this approach support debugging Vite SSR HMR problems and Pinia store mocking errors?▼

Yes, this approach resolves Vite SSR HMR problems and Pinia store mocking errors by applying targeted tooling and workflow fixes for Vue 3 enterprise admin systems and complex development environments.

What is the best way to watch arrays in Vue 3.5+ without causing inefficient deep watches?▼

The best way to watch arrays in Vue 3.5+ is utilizing efficient feature usage like numeric deep watch and reactive props destructure to prevent runtime errors and poor developer experience.

Can I catch CSS module class name typos at build time in Vue 3?▼

Yes, you can catch CSS module class name typos at build time by enabling strict template and CSS module checking in your Vue 3 and TypeScript configuration to prevent runtime errors.

Related Skills

Explore More Software Engineering Skills→
CDavidDvCDavidDv
1

vue-best-practices

Enforce Vue.js 3 Composition API and TypeScript best practices.

Community
Advanced
zb-sszb-ss
1

verify

Run build, type, lint, test, security, and diff checks across a project.

Official
Intermediate
jacexhjacexh

vue-typescript

Build Vue 3 components with TypeScript and the Composition API.

Community
Intermediate
Prorise-coolProrise-cool
24

vue-best-practices

Enforce Vue 3 best practices with TypeScript, vue-tsc, and Volar.

Community
Intermediate