vue-best-practices

Guide Vue 3 projects toward idiomatic Composition API usage.

5.7k|318|Updated Jan 28, 2026
One-click install
npx skills add https://github.com/antfu/skills --skill vue-best-practices-antfu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vue-best-practices
Source: https://github.com/antfu/skills/tree/main/skills/vue-best-practices
Command: npx skills add https://github.com/antfu/skills --skill vue-best-practices-antfu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill codifies Vue.js best practices to guide teams toward idiomatic Composition API usage and away from anti-patterns.

Core Features & Use Cases

  • Establishes a coherent set of conventions for script setup, TypeScript, and composables to improve maintainability.
  • Provides onboarding, code reviews, and architecture guidance for Vue 3 projects, SSR, and modern tooling like Vite.
  • Helps teams avoid common pitfalls in Vue component design, event handling, and state management by consolidating official docs and practical patterns.

Quick Start

Use this skill to audit a Vue 3 project and generate a prioritized plan for migrating to the Composition API with TypeScript.

Frequently Asked Questions about vue-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are Vue 3 Composition API best practices for structuring components?

Vue 3 Composition API best practices recommend using script setup, TypeScript, and well-organized composables to improve maintainability and avoid common anti-patterns. This approach enforces naming conventions and structured code organization for idiomatic component design.

How do I migrate a Vue project to the Composition API with TypeScript?

To migrate a Vue project to the Composition API with TypeScript, audit your existing .vue files and generate a prioritized migration plan. This involves adopting script setup, refactoring logic into composables, and establishing strict typing conventions.

Can I use this Vue guidance for projects with Vue Router, Pinia, and SSR?

Yes, this Vue guidance applies to projects utilizing Vue Router, Pinia, and SSR. It provides architecture guidance and code reviews specifically tailored for Vue 3 applications using these tools alongside modern build tooling like Vite.

What's the best way to avoid anti-patterns in Vue component event handling?

The best way to avoid anti-patterns in Vue component event handling is to follow codified best practices that consolidate official documentation and practical patterns. This helps teams prevent common pitfalls in component design and state management.

Why do I need structured references and frontmatter metadata in Vue projects?

Structured references and frontmatter metadata are needed in Vue projects to enforce consistent documentation and architectural standards. This practice ensures teams maintain coherent conventions and easily link to official resources during onboarding and code reviews.