# Vue Best Practices

> This skill should be used when the user asks to review, refactor, debug, or optimize Vue 3 code for performance, correctness, SSR hydration, reactivity stability, request concurrency, TypeScript safety, or bundle size.

- Skill: `frankiglesias/vue-best-practices` (Agent Skill, multi-file: 26 files)
- Install (CLI): `npx skillmds@latest add frankiglesias/vue-best-practices`
- Raw SKILL.md: https://api.skillmd.com/api/skills/frankiglesias/vue-best-practices/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: frankiglesias (https://skillmd.com/u/frankiglesias)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/frankiglesias/vue-best-practices

---


# Vue Best Practices

Use this skill as a rulebook for fixing common Vue 3 anti-patterns in production apps.

## Workflow

1. Open `AGENTS.md`.
2. Select only the relevant rule files from `rules/`.
3. Apply the smallest safe change that resolves the issue.
4. Re-check behavior and run the project's lint, test, and build checks.

## Repository Guardrails

- Use Vue 3 Composition API with `<script setup lang="ts">`.
- Follow the existing state-management pattern already used by the project (Vuex, Pinia, etc.).
- Do not create new global components.
- Do not add comments unless the user explicitly asks for them.
- Do not import Vue compiler macros (`defineProps`, `defineEmits`, `defineExpose`, `withDefaults`) from `vue`.
- Match ESLint style defaults in this repo: semicolons, single quotes, trailing commas for multiline, 2-space indent.

## Output Expectations

- Explain which rules were applied and why.
- Prefer composables and pure utilities over ad-hoc component logic.
- Keep changes incremental; avoid broad rewrites unless asked.