Vue 3 Cheat Sheet

Create Project (Vite)

Single-File Component (SFC) Structure

Project Structure

main.js — App Bootstrap

ref vs reactive — Full Comparison 🔥

ref vs reactive — When to Use

computed()

watch & watchEffect

script setup vs Options API 🔥

defineProps — Runtime vs TypeScript

defineEmits & defineExpose

Template Refs

Template Syntax Reference 🔥

Event Modifiers

All Directives 🔥

Custom Directives

v-if vs v-show

Slots

Dynamic & Async Components

Teleport & Suspense

Component v-model (custom) 🔥

Fallthrough Attrs ($attrs)

Lifecycle Hooks Reference 🔥

Usage Examples

Options API ↔ Composition API

Computed Best Practices

Watch Patterns ⭐

Composable Patterns 🔥

Composable Rules ⭐

Name composables useXxx() by convention
Must be called inside setup() or <script setup> — not conditionally
Return reactive refs — not plain values
Always clean up in onUnmounted (timers, events, subscriptions)
Accept refs or getters as arguments (use <code>toValue()</code> inside)
Composables can call other composables
Can use lifecycle hooks — they register to the calling component

Router Setup 🔥

useRouter & useRoute

RouterLink & RouterView

Navigation Guards

Pinia Store — Setup vs Options 🔥

Using Stores in Components

Pinia Plugins

provide() & inject()

When to Use What

Async setup() with Suspense

Error Boundaries (onErrorCaptured)

Transition Component

TransitionGroup (Lists)

Essential Imports Cheat Sheet 🔥

Vue 3 vs Vue 2 Key Differences

Vue 3 Gotchas ⭐

Always use .value with refs — forget .value in <script> and nothing updates (but not in template)
reactive() destructuring breaks reactivity — use <code>toRefs(state)</code> or switch to <code>ref()</code>
Don't replace reactive() objects — <code>state = { newProp: 1 }</code> breaks reactivity; use <code>Object.assign(state, {...})</code>
watch is lazy by default — add <code>{ immediate: true }</code> to run on mount
v-for key must be unique and stable — avoid index as key when list can reorder
Computed must be pure — no side effects (no mutations, no async inside computed)
storeToRefs for Pinia state — destructuring store directly loses reactivity for state
defineProps/defineEmits are compiler macros — no import needed in <script setup>
onMounted = DOM is ready — never access DOM refs before onMounted
Async composables — top-level await in <script setup> requires parent <Suspense>
v-if has higher priority than v-for — Vue 3 changed this from Vue 2 behavior
nextTick() — await nextTick() when you need to access DOM after a reactive change

Performance Tips ⭐

Use <code>v-show</code> for frequent toggles; <code>v-if</code> for conditional rendering of heavy components
<code>v-once</code> for truly static content — never re-renders
<code>v-memo</code> to skip subtree re-renders when deps unchanged (Vue 3.2+)
<code><KeepAlive></code> to cache components and avoid re-mounting
Use <code>shallowRef / shallowReactive</code> for large data structures that don't need deep reactivity
Lazy-load routes and heavy components with <code>defineAsyncComponent</code>
Use <code>markRaw()</code> for non-reactive objects (third-party class instances)
Avoid unnecessary <code>watch(obj, fn, { deep: true })</code> — use targeted property watches
Avoid creating new objects/arrays in computed getters — causes unnecessary re-renders