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.