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.
- 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