Master Vue 3: from fundamentals to production
Reactivity, Composition API, components, slots, Vue Router, and Pinia. Monaco editor with real Vue running live in the browser—learn by doing.
Let’s figure it out.
Ask me about this course or where to start.
- Step 1
Vue 1: What Is Vue? Your First App
Vue is a progressive JavaScript framework for building user interfaces: instead of manually creating...
Start Lesson - Step 2
Vue 2: Template Syntax & Interpolation
Vue templates are HTML with superpowers. The most basic superpower is text interpolation: {{ }} (cal...
Start Lesson - Step 3
Vue 3: Attribute Bindings with v-bind
v-bind lets you bind an HTML attribute to a JS expression instead of hardcoding it as a static strin...
Start Lesson - Step 4
Vue 4: Event Handling with v-on
v-on listens for DOM events and runs code in response — write v-on:click="..." or its shorthand @cli...
Start Lesson - Step 5
Vue 5: Two-Way Binding with v-model
Forms need two things at once: display the current value, and update that value when the user types....
Start Lesson - Step 6
Vue 6: Conditional Rendering: v-if vs v-show
Vue gives you two ways to conditionally show content, and they behave very differently. v-if (with o...
Start Lesson - Step 7
Vue 7: List Rendering with v-for
v-for repeats an element once per item in an array (or object, or number range), using the syntax it...
Start Lesson - Step 8
Vue 8: Class & Style Bindings
Static class and style attributes only get you so far — :class and :style let you compute them from ...
Start Lesson - Step 9
Vue 9: Computed Properties
A computed property derives a value from other reactive state and automatically re-runs only when on...
Start Lesson - Step 10
Vue 10: Watchers
watch() lets you run a side effect whenever a specific piece of reactive state changes — things a co...
Start Lesson - Step 11
Vue 11: ref vs reactive
Vue's Composition API gives you two primitives for reactive state: `ref()` wraps ANY value (usually ...
Start Lesson - Step 12
Vue 12: Reactivity Fundamentals
Vue's reactivity system is built on native JavaScript Proxy objects. Calling `reactive(obj)` wraps i...
Start Lesson - Step 13
Vue 13: Computed Properties Deep Dive
`computed()` can take a function (read-only, the common case) or an object with `get`/`set` — a **wr...
Start Lesson - Step 14
Vue 14: watch vs watchEffect
`watch(source, callback)` watches an **explicit** source (a ref, a reactive property getter, or an a...
Start Lesson - Step 15
Vue 15: Composables — Extracting Reusable Logic
A **composable** is nothing more than a plain JavaScript function — conventionally prefixed `use` — ...
Start Lesson - Step 16
Vue 16: Lifecycle Hooks
Every Vue component instance goes through a **lifecycle**: created, mounted (its DOM exists), possib...
Start Lesson - Step 17
Vue 17: Template Refs
A **template ref** gives you direct access to a real DOM element (or child component instance): decl...
Start Lesson - Step 18
Vue 18: Provide / Inject
`provide(key, value)` (called in an ancestor's `setup()`) makes a value available to `inject(key)` i...
Start Lesson - Step 19
Vue 19: The <script setup> Mental Model
`<script setup>` is **compile-time syntax sugar** over the exact `setup()` object pattern you've bee...
Start Lesson - Step 20
Vue 20: defineProps / defineEmits Mental Model
In real .vue files, `defineProps<{...}>()` and `defineEmits<{...}>()` give you compile-time-checked,...
Start Lesson - Step 21
Vue 21: Component Basics & Registration
As an app grows, cramming everything into one giant template becomes unmanageable. Vue lets you spli...
Start Lesson - Step 22
Vue 22: Props — Passing Data Down
Props are how a parent hands data down to a child component. A child declares the props it accepts a...
Start Lesson - Step 23
Vue 23: Emitting Custom Events
Since props only flow down, a child needs another mechanism to talk back up to its parent: custom ev...
Start Lesson - Step 24
Vue 24: v-model on Components
v-model on a native input is really sugar for binding a value and listening for an update. Vue lets ...
Start Lesson - Step 25
Vue 25: Default Slots
Props pass data down, but sometimes a component needs to accept arbitrary MARKUP from its parent — a...
Start Lesson - Step 26
Vue 26: Named & Scoped Slots
A component can expose more than one slot by naming them — the parent targets each with a <template ...
Start Lesson - Step 27
Vue 27: Dynamic Components with <component :is="...">
Sometimes which component to render depends on runtime state — a tab UI, a wizard, a plugin panel. T...
Start Lesson - Step 28
Vue 28: keep-alive
Switching <component :is="..."> normally destroys the outgoing component instance and creates a fres...
Start Lesson - Step 29
Vue 29: Teleport
Modals, tooltips and dropdowns often need to render at the very top of the DOM (usually on document....
Start Lesson - Step 30
Vue 30: Fallthrough Attributes
When a parent passes an attribute or listener that the child does NOT declare as a prop (or in emits...
Start Lesson - Step 31
Vue 31: v-model Modifiers
v-model modifiers change how the DOM event maps to your reactive state. .lazy swaps the sync trigger...
Start Lesson - Step 32
Vue 32: Form Input Bindings Deep Dive
Every native form control has its own v-model wiring convention. A checkbox with no value attribute ...
Start Lesson - Step 33
Vue 33: Computed Setters
A computed property is normally read-only: a getter function that recomputes whenever its dependenci...
Start Lesson - Step 34
Vue 34: Watch Options — deep, immediate, flush
watch() lets you run side effects in response to specific reactive sources, with fine control over e...
Start Lesson - Step 35
Vue 35: Async Components + Suspense
defineAsyncComponent wraps a loader function that returns a Promise resolving to a component — the s...
Start Lesson - Step 36
Vue 36: Custom Directives
Templates cover almost everything, but occasionally you need direct access to the raw DOM element — ...
Start Lesson - Step 37
Vue 37: Transitions
The <transition> component watches its single child element for insertion and removal — driven by v-...
Start Lesson - Step 38
Vue 38: TransitionGroup for Lists
TransitionGroup extends the same enter/leave class convention to every item in a v-for list individu...
Start Lesson - Step 39
Vue 39: Vue Router Basics
Vue Router turns a single Vue app into something that feels like a multi-page site without ever relo...
Start Lesson - Step 40
Vue 40: Dynamic Route Params
A route path can include a dynamic segment, like /users/:id — the colon marks a placeholder that mat...
Start Lesson - Step 41
Vue 41: Nested Routes
Real layouts are rarely flat — a Dashboard usually keeps a shared header and sidebar while swapping ...
Start Lesson - Step 42
Vue 42: Navigation Guards
Not every route should be reachable by everyone, all the time. router.beforeEach registers a global ...
Start Lesson - Step 43
Vue 43: Programmatic Navigation
Not every navigation starts with a click on a <router-link> — often you need to redirect AFTER somet...
Start Lesson - Step 44
Vue 44: Pinia Basics — A Global Store
Passing data down through props and bubbling events back up works fine for closely related component...
Start Lesson - Step 45
Vue 45: Pinia Actions & Getters
Raw state is rarely exactly what a template wants to display — a cart holds line items, but the UI w...
Start Lesson - Step 46
Vue 46: Composing Multiple Stores
Real apps have more than one store — users, carts, notifications, settings — and they inevitably nee...
Start Lesson - Step 47
Vue 47: Route Meta Fields
Lesson 42's guard hardcoded a single path, '/admin' — fine for one protected route, unmanageable for...
Start Lesson - Step 48
Vue 48: Lazy-Loading Routes
Every route component you import eagerly gets bundled into your app's initial JavaScript payload — f...
Start Lesson - Step 49
Vue 49: Single-File Components & Vite
Real-world Vue apps aren't written as one big JavaScript object like we've been doing — they're writ...
Start Lesson - Step 50
Vue 50: TypeScript with Vue
TypeScript slots directly into Vue: ref<T>() and computed<T>() accept explicit type parameters, comp...
Start Lesson - Step 51
Vue 51: Testing Components
Testing a Vue component means mounting it in a simulated DOM (via Vitest + @testing-library/vue or @...
Start Lesson - Step 52
Vue 52: Performance: v-memo & shallowRef
Vue is fast by default, but two escape hatches exist for when a list or an object is big enough that...
Start Lesson - Step 53
Vue 53: SSR & the Nuxt Mental Model
Server-Side Rendering runs your Vue app on the server first, producing a fully-formed HTML string th...
Start Lesson - Step 54
Vue 54: Environment Variables & Config
Vite reads .env files (.env, .env.production, .env.staging, ...) and statically replaces any import....
Start Lesson - Step 55
Vue 55: Error Handling with onErrorCaptured
Vue's answer to 'what if a child component throws' is onErrorCaptured: a lifecycle hook you register...
Start Lesson - Step 56
Vue 56: Accessibility Basics
Accessibility isn't an add-on pass at the end - it's a handful of concrete habits: prefer semantic/n...
Start Lesson - Step 57
Vue 57: Production Build & Deployment
Shipping a Vue app comes down to one command and one folder: npm run build compiles, bundles, and ha...
Start Lesson - Step 58
Vue 58: Capstone: Ship It
You've gone from a single ref and a template expression all the way to routed, stateful, tested, acc...
Start Lesson