vue-best-practices

Enforce Vue 3 typing and Volar best practices for component authoring.

Updated Nov 24, 2025
One-click install
npx skills add https://github.com/AloisH/bistro --skill vue-best-practices-aloish
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vue-best-practices
Source: https://github.com/AloisH/bistro/tree/main/.agents/skills/vue-best-practices
Command: npx skills add https://github.com/AloisH/bistro --skill vue-best-practices-aloish

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams often struggle to maintain consistent Vue 3 typing, template correctness, and IDE guidance across large codebases. This skill consolidates best practices to ensure reliable type-checking, proper prop typing, and smooth editor integration with Volar and vue-tsc.

Core Features & Use Cases

  • Standardize prop extraction, wrapper components typing, and template type checking with Volar configuration.
  • Provide guidelines for using vue-component-type-helpers, strictTemplates, and CSS module typing patterns.
  • Use Case: A team refactors a Vue 3 app and wants to guarantee no undefined components in templates and correct prop types.

Quick Start

Review the collection of rules in rules/ to see guidelines and how to apply them in projects.

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 type checking in Vue 3 with Volar?

To enforce strict template type checking, configure Volar with strictTemplates enabled. This validates component usage and prop types directly within your Vue 3 templates.

What is the best way to type wrapper components in Vue 3?

Typing wrapper components in Vue 3 is best achieved by using vue-component-type-helpers to standardize prop extraction and ensure correct type inference across the component wrapper layer.

How do I configure vue-tsc for consistent type-checking across a Vue project?

Configuring vue-tsc involves applying standardized rules for type-checking and IDE guidance, which guarantees consistent type safety and correct prop typing across large Vue 3 codebases.

Does Volar support CSS module typing patterns for Vue components?

Volar supports CSS module typing patterns by providing editor guidance and type-checking configurations that standardize style bindings and ensure type safety within Vue 3 components.

Why are my Vue 3 component props showing as undefined in templates?

Vue 3 component props show as undefined when strictTemplates is not enabled or prop types are not properly extracted, which standardizing Volar configurations and prop typing rules resolves.