vue-best-practices

Provides Vue 3 coding standards for components and state management.

Updated Apr 8, 2026
One-click install
npx skills add https://github.com/rafasoares/rafasoares.com --skill vue-best-practices-rafasoares
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vue-best-practices
Source: https://github.com/rafasoares/rafasoares.com/tree/main/.agents/skills/vue-best-practices
Command: npx skills add https://github.com/rafasoares/rafasoares.com --skill vue-best-practices-rafasoares

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Standardizes Vue 3 development practices to reduce drift and improve maintainability across teams.

Core Features & Use Cases

  • Provides architecture and coding guidelines for composition API usage, SFC structure, and reactivity patterns.
  • Includes actionable references and patterns for props, emits, v-model, provide/inject, and lifecycles.
  • Helps teams align on naming, component boundaries, and performance considerations across Vue Router, Pinia, and Vite projects.

Quick Start

Audit a Vue project and begin aligning components, state, and references with the described workflow.

Frequently Asked Questions about vue-best-practices

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

FAQPage Schema
What are the best practices for Vue 3 composition API and SFC structure?

Vue 3 best practices for composition API and SFC structure involve codifying consistent architecture, explicit prop and emit patterns, v-model usage, and provide/inject conventions to reduce drift and improve maintainability across teams.

How do I standardize Vue workflows for a large frontend application?

Standardize Vue workflows for large frontends by applying guidelines for component boundaries, reactivity patterns, and performance considerations across Vue Router, Pinia, and Vite projects to ensure consistent architecture.

Can I use these Vue best practices with TypeScript and Pinia?

Yes, these Vue best practices apply to TypeScript projects and include alignment guidelines for Pinia state management, Vue Router, and Vite, ensuring consistent naming and component boundaries across the stack.

What's the best way to structure Vue 3 component props and emits?

The best way to structure Vue 3 component props and emits is by using explicit prop and emit patterns, standardized v-model usage, and provide/inject conventions defined in actionable reference guidelines.

When do I need explicit v-model and provide/inject patterns in Vue?

You need explicit v-model and provide/inject patterns in Vue when standardizing component communication and state sharing across small apps to large frontends, ensuring consistent architecture and reliable reactivity guidelines.