vue-best-practices

Use `<script setup lang="ts">` with SFC sections ordered as script, template, style. Keep components focused on a single responsibility, extract stateful logic into composables, and define typed contracts with defineProps and defineEmits.

Split when a component owns both orchestration and substantial presentational markup, has 3 or more distinct UI sections, or contains repeated template blocks. Entry and route view components should stay thin composition surfaces.

Composition API with `<script setup>` is the recommended default for Vue 3 projects. Use Options API only when the project explicitly requires it, such as maintaining legacy codebases.

Use defineModel in Vue 3.4+ for component v-model bindings. For earlier versions, use the modelValue prop with an update:modelValue emit. Reserve v-model for true two-way component contracts.

Virtualize lists over 50-100 items using libraries like vue-virtual-scroller or @tanstack/vue-virtual so only visible items render. Apply v-memo to skip re-renders of unchanged items and avoid deep component nesting in list rows.

Use provide/inject for deep-tree dependencies or shared context crossing more than about three layers. Use symbol-based InjectionKey keys, keep mutations in the provider, and expose explicit actions rather than letting consumers mutate shared state.