vue-best-practices

Use script setup with TypeScript, keep each component to a single responsibility, and split components that own both state orchestration and multiple UI sections. Move reusable stateful logic into composables and keep route-level views as thin composition surfaces.

Use shallowRef for primitives, ref when you frequently replace entire objects, reactive when you mainly mutate properties in place, and shallowRef for opaque external instances. Derive values with computed and reserve watchers for side effects.

Composition API with script setup is the recommended default for new Vue 3 work, offering better TypeScript inference and logic reuse via composables. Options API remains valid when a project explicitly standardizes on it.

Use KeepAlive to preserve state across tab or view switches, Teleport for overlays that must escape stacking contexts, and Suspense to coordinate async dependencies with fallback UI. Add them only when the requirement exists, not by default.

Virtualize lists over roughly 50-100 items using vue-virtual-scroller or @tanstack/vue-virtual so only visible rows render. Also flatten component abstraction in list items and apply v-memo so items re-render only when their relevant state changes.

watch() requires a getter, ref, or reactive object; passing state.count directly loses reactivity. Use a getter like () => state.count or convert properties with toRefs before watching them.