vue-best-practices

Codify Vue 3 TypeScript best practices for vue-tsc and Volar configuration.

490|23|Updated Sep 25, 2023

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

Ready to run

npx skills add https://github.com/victorgarciaesgi/regle --skill vue-best-practices-victorgarciaesgi

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps Vue developers enforce correct typing and stable components by applying Vue 3 best practices for TypeScript, vue-tsc, and Volar.

Core Features & Use Cases

Enforces strict template checks and proper typing for components
Guides wrapper components, props extraction, and template type checking
Improves editor experience with Volar configuration and recommended settings

Quick Start

Use the vue-best-practices skill to align your Vue 3 project with recommended TypeScript typings, Volar settings, and wrapper-component typing rules.

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 TypeScript?▼

Strict template type checking in Vue 3 is enforced by applying vue-tsc and Volar best practices. This ensures proper component typing and improves the editor experience across your project.

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

Typing wrapper components in Vue 3 involves applying specific best practices for props extraction and inference. This approach guarantees stable components and accurate type safety.

Does Volar work with TypeScript for Vue 3 template type checking?▼

Volar works seamlessly with TypeScript to provide Vue 3 template type checking. Configuring Volar with recommended settings improves the editor experience and ensures accurate type inference.

Why does vue-tsc report type errors in my Vue 3 templates?▼

vue-tsc reports type errors in Vue 3 templates when strict template checks are not properly configured. Applying Vue 3 TypeScript best practices resolves these inference and typing issues.

How do I configure Volar for better editor experience in Vue 3?▼

Configuring Volar for a better editor experience in Vue 3 involves applying recommended settings and frontmatter metadata rules. This setup guides configuration decisions and improves type safety.

Can I extract and infer props automatically in Vue 3 wrapper components?▼

You can extract and infer props automatically in Vue 3 wrapper components by following specific TypeScript patterns. This ensures proper typing and stable component architecture.