vue-best-practices

Enforce Vue 3 best practices with Composition API, TypeScript, and ecosystem tools.

1|Updated Jan 23, 2026
One-click install
npx skills add https://github.com/sltc-dev/core-foundry --skill vue-best-practices-sltc-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vue-best-practices
Source: https://github.com/sltc-dev/core-foundry/tree/main/skills/coding/vue-best-practices
Command: npx skills add https://github.com/sltc-dev/core-foundry --skill vue-best-practices-sltc-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance on Vue 3 best practices, helping developers avoid common pitfalls and write more maintainable, performant, and scalable Vue applications.

Core Features & Use Cases

  • Composition API Focus: Strongly recommends and guides usage of Composition API with <script setup> and TypeScript.
  • Vue 3 Ecosystem Coverage: Covers core Vue 3, SSR, Volar, vue-tsc, Vue Router, and Pinia.
  • Use Case: When starting a new Vue 3 project or refactoring an existing one, use this Skill to ensure adherence to modern best practices, covering reactivity, components, forms, and more.

Quick Start

Load the vue-best-practices skill for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work.

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 reactivity and Composition API?

Vue 3 best practices strongly prioritize the Composition API with `<script setup>` and TypeScript to manage reactivity, computed properties, and watchers, helping you avoid common pitfalls and write maintainable applications.

How do I structure Pinia and Vue Router in a Vue 3 project?

Structure Pinia and Vue Router by applying Vue 3 best practices that enforce proper TypeScript integration and `<script setup>` usage, ensuring scalable state management and routing across your application.

Does this Vue 3 best practices guidance cover SSR and Volar?

Yes, the Vue 3 best practices guidance covers SSR, Volar, and vue-tsc, ensuring your Composition API and TypeScript code adheres to modern standards for server-side rendering and type checking.

What is the recommended way to handle Vue 3 component props and emits?

The recommended way to handle Vue 3 component props and emits is using `<script setup>` with TypeScript, enforcing strict typing and clear definitions to improve component maintainability and scale.

How do I avoid common gotchas in Vue 3 lifecycle hooks and composables?

Avoid Vue 3 lifecycle hook and composable gotchas by following enforced best practices for Composition API patterns, ensuring proper cleanup and reactivity tracking within your `<script setup>` blocks.

When should I use provide/inject versus Pinia for Vue 3 state management?

Vue 3 best practices guide the use of provide/inject for component tree scoping and Pinia for global state, ensuring you choose the correct TypeScript-typed approach for your specific application architecture.