💚 Learn Vue.js — Engineering Reference
A production-grade Vue 3 curriculum built for mid-level developers moving to senior roles. Every chapter is code-first: dense, annotated examples covering complex implementations, anti-patterns, edge cases, and production tips. No tutorial fluff — just the patterns, traps, and internals that real codebases depend on.
How to Use This Reference
- Jump to a chapter as a reference when you hit a concept in production code.
- Read the anti-pattern sections before refactoring — see the wrong way, then the right way.
- Solve the Spot the Bug challenges at the end of each chapter to test your understanding.
- Build the capstone projects in chapter 24 to apply the patterns in a real app.
Prerequisites
- Solid JavaScript (ES2015+): closures, destructuring, modules, promises, Proxy.
- HTML & CSS fundamentals.
- TypeScript basics (generics, interfaces, union types) — chapters use
<script setup lang="ts">. - Node.js LTS installed.
- VS Code + the Vue - Official (Volar) extension.
Curriculum
Part I — Foundations & Reactivity
| # | Topic | Why It Matters |
|---|---|---|
| 01 | Introduction & Setup | Proxy reactivity internals, createApp isolation, SFC compilation pipeline, multi-instance mounting. |
| 02 | Template Syntax & Directives | Compiler patch flags, keyed vnode diffing, modifier chains, v-model expansion, v-if/v-for precedence. |
| 03 | Reactivity Fundamentals | Track/trigger dependency graph, ref vs reactive, destructuring trap, toRef/toRefs, shallowRef, customRef. |
| 04 | Computed & Watchers | Computed dirty flag caching, watch vs watchEffect, flush timing, deep watch cost, race condition cleanup. |
| 05 | Components Basics | defineProps/defineEmits/defineExpose macros, prop validation, attr fallthrough, async components, defineModel. |
Part II — Component Architecture
| # | Topic | Why It Matters |
|---|---|---|
| 06 | Component Communication | Props down/events up contract, provide/inject with typed InjectionKey, $attrs forwarding, multi-v-model. |
| 07 | Composition API In Depth | setup() vs <script setup>, composable patterns, module-scoped singletons, effectScope cleanup, async setup. |
| 08 | Lifecycle Hooks | Full lifecycle sequence, onMounted DOM init, onUnmounted cleanup, KeepAlive activation, onErrorCaptured boundaries. |
| 09 | Forms & v-model | Modifier internals, .lazy/.number/.trim edge cases, schema validation, custom inputs, debounced search. |
Part III — State, Data & Routing
| # | Topic | Why It Matters |
|---|---|---|
| 10 | State Management with Pinia | Setup vs options store, $patch batch mutations, cross-store deps, persistence plugin, SSR hydration. |
| 11 | Routing with Vue Router | Lazy loading + code splitting, guard composition, scroll restoration, beforeRouteUpdate, typed routes. |
| 12 | Fetching Data & Async | AbortController race prevention, request deduplication, SWR pattern, pagination, optimistic updates, Suspense. |
| 13 | Slots & Scoped Slots | Default/named slots, scoped slot data passing, renderless components, slot compilation, conditional slots. |
Part IV — Advanced Patterns
| # | Topic | Why It Matters |
|---|---|---|
| 14 | Dynamic & Async Components | component :is, defineAsyncComponent states, KeepAlive LRU caching, shallowRef for component refs, Suspense. |
| 15 | Custom Directives | Hook lifecycle (created→unmounted), directive binding shape, v-lazy with IntersectionObserver, v-copy clipboard. |
| 16 | Teleport & Suspense | Teleport stacking context escape, disabled prop, nested Suspense boundaries, async error handling, SSR-safe teleport. |
| 17 | TypeScript with Vue | defineProps generics, defineEmits signatures, InjectionKey typing, generic composables, template type narrowing. |
Part V — Production Engineering
| # | Topic | Why It Matters |
|---|---|---|
| 18 | Testing | Vue Test Utils mounting, effectScope for composable tests, Pinia store mocking, async test patterns, flushPromises. |
| 19 | Performance Optimization | Patch flag compiler hints, v-memo for large lists, shallowRef for big data, v-once, manual chunk splitting. |
| 20 | SSR & Nuxt Basics | Hydration lifecycle, onServerPrefetch, state serialization, hydration mismatch causes, Nuxt useFetch, SSR-safe composables. |
| 21 | Build Tooling & Vite | HMR internals, plugin pipeline, env variables, CSS scoped/modules/preprocessors, production build optimization. |
| 22 | Security | XSS auto-escaping vs v-html, DOMPurify sanitization, CSP configuration, credential handling, content security. |
| 23 | Design Patterns | Store pattern, renderless components, composable composition, provider/consumer DI, observer event bus, feature modules. |
| 24 | Exercises & Projects | Capstone projects: Kanban board, real-time WebSocket chat, SSR Nuxt blog, generic TypeScript component library. |