vue-best-practices

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

490|23|Updated Sep 25, 2023
One-click install
npx skills add https://github.com/victorgarciaesgi/regle --skill vue-best-practices-victorgarciaesgi
Or copy as Structured Prompt for Agent▼
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.