# Vue Development Guides

> Use when working with a collection of best practices and tips for developing applications using Vue.js. This skill MUST be apply when developing, refactoring or reviewing Vue.js or Nuxt projects.

- Skill: `tomevault-io/vue-development-guides` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/vue-development-guides`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/vue-development-guides/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/vue-development-guides

---


# Vue.js Development Guides

## Tasks Checklist

- [ ] Followed the core principles
- [ ] Followed the defaults unless there is a good reason not to
- [ ] Followed the reactivity best practices
- [ ] Followed the component best practices
  - [ ] Followed the Vue SFC best practices
  - [ ] Kept components focused
    - [ ] Split large components into smaller ones when needed
    - [ ] Moved state/side effects into composables if applicable
  - [ ] Followed data flow best practices

---

## Core Principles
- **Keep state predictable:** one source of truth, derive everything else.
- **Make data flow explicit:** Props down, Events up for most cases.
- **Favor small, focused components:** easier to test, reuse, and maintain.
- **Avoid unnecessary re-renders:** use computed properties and watchers wisely.
- **Readability counts:** write clear, self-documenting code.

## Defaults (unless the user says otherwise)

- Prefer the **Composition API** over the Options API.

## Reactivity

IMPORTANT: You MUST follow the `references/reactivity-guide.md` for reactive state management when creating, updating a component or a composable.

## Components

IMPORTANT: You MUST follow the `references/sfc-guide.md` for best practices when working with Vue SFCs.

- Prefer Vue Single-File Components (SFC) using **`<script setup lang="ts">`** (TypeScript) by default.
- In Vue SFCs, keep sections in this order: `<script>` → `<template>` → `<style>`.

### Keep components focused

Split a component when it has **more than one clear responsibility** (e.g. data orchestration + UI, or multiple independent UI sections).

- Prefer **smaller components + composables** over one “mega component”
- Move **UI sections** into child components (props in, events out).
- Move **state/side effects** into composables (`useXxx()`).

NOTE: This rule also applies to the entry component (e.g. App.vue) in a Vue / Nuxt project by default.

### Data Flow

IMPORTANT: You MUST follow the `references/data-flow-guide.md` for passing and receiving data between components using:
- Props
- Emits
- `v-model`
- provide/inject

For sharing data across the app, please follow the `references/state-management-guide.md` and consider using a Store for state management solution.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/stoneepigraph) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-16 -->