vue-development-guides

Original：🇺🇸 English

Translated

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.

1.6kinstalls

Sourcevuejs-ai/skills

Added on2026-02-04

NPX Install

npx skill4agent add vuejs-ai/skills vue-development-guides

SKILL.md Content

View Translation Comparison →

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.

vue-development-guides

NPX Install

Tags

SKILL.md Content

Vue.js Development Guides

Tasks Checklist

Core Principles

Defaults (unless the user says otherwise)

Reactivity

Components

Keep components focused

Data Flow