vue-best-practices

Enforce Vue 3 typing best practices for components and templates.

624|138|Updated Aug 7, 2023
One-click install
npx skills add https://github.com/oyjt/uniapp-vue3-template --skill vue-best-practices-oyjt
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vue-best-practices
Source: https://github.com/oyjt/uniapp-vue3-template/tree/main/.cursor/skills/vue-best-practices
Command: npx skills add https://github.com/oyjt/uniapp-vue3-template --skill vue-best-practices-oyjt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams enforce Vue 3 typing discipline across components by standardizing prop/emit typings, template checks, and wrapper-component typing, reducing runtime type errors and refactoring risk.

Core Features & Use Cases

  • Extract Component Props, Emits, and Slots using vue-component-type-helpers to generate precise types for components.
  • Enable Strict Template Checking with vue-tsc and Volar to catch undefined components and props during compile time.
  • Assist Wrapper Components & Fallthrough Attributes with guidance on typing and IDE autocomplete for forwarded attributes.

Quick Start

Analyze a Vue component or project to apply consistent typing rules, enable strict template checks, and generate contributor-friendly guidance for teams.

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

To extract Vue component props and emits types in TypeScript, use the vue-component-type-helpers package to generate precise type definitions for components, slots, and emits. This prevents runtime type errors by enforcing strict typing discipline across your project.

How do I enable strict template type checking in Vue 3?

Enable strict template checking in Vue 3 by configuring vue-tsc and Volar. This setup catches undefined components and invalid props during compile time, ensuring template type safety and reducing refactoring risk across your TypeScript project.

What is the best way to type Vue wrapper components and fallthrough attributes?

The best way to type Vue wrapper components and fallthrough attributes is applying specific typing guidance for forwarded attributes. This ensures proper IDE autocomplete and type safety when passing attributes through to child components.

Why do I need vue-tsc and Volar for Vue TypeScript projects?

You need vue-tsc and Volar to enforce strictTemplates and fallthroughAttributes rules in Vue TypeScript projects. These tools provide compile-time checks for undefined components and props, preventing runtime type errors before code execution.

Can I standardize emit typings across multiple Vue components?

Yes, you can standardize emit typings across multiple Vue components using vue-component-type-helpers. This standardization enforces consistent typing discipline across your project, reducing refactoring risk and preventing runtime type errors.

Does Volar configuration support strict template checks for undefined props?

Yes, Volar configuration supports strict template checks for undefined props and components. By enabling strictTemplates and fallthroughAttributes rules, Volar catches type errors during compile time when used alongside vue-tsc.