With both React and Angular already under your belt, Vue is best understood by where it lands between them. Like React, it's component-based, flexible, and unopinionated about much of your app's structure. Like Angular, it uses an HTML template with directives (v-if, v-for) rather than JSX, and ships official solutions for routing and state. Vue's own pitch is being approachable and incrementally adoptable — and in practice it feels like Angular's template ergonomics with React's lightness.

The Single-File Component (SFC)

A Vue component lives in a .vue file — a Single-File Component — with three blocks: <script> for logic, <template> for markup, and an optional <style> for CSS, all in one file. This is a genuine middle ground: React puts markup and logic together in JSX but CSS elsewhere; Angular splits all three into separate files; Vue keeps all three together but cleanly separated by block. {{ name }} is text interpolation — identical syntax to Angular, and the same role as React's {name}.

<script setup> and the Composition API

The setup attribute on <script> enables the Composition API — the modern way to write Vue, where everything declared in the script block (variables, functions, imports) is automatically available to the template. There's no return statement, no boilerplate wiring: declare const name = 'Philip' and the template can use {{ name }} directly. This course uses <script setup> throughout.

Style Scoping — Built In

The scoped attribute on <style> confines those styles to this component only — the same automatic style encapsulation Angular gives every component, and what React needs CSS Modules or a library to achieve. Two components can both style h1 differently with zero collision, just by adding scoped.

Creating a Project with Vite

npm create vue@latest runs Vue's official scaffolding tool (built on Vite — the same build tool used throughout the React course), asking a few setup questions (TypeScript, router, Pinia — all optional and addable later). npm run dev starts the dev server with live reload, exactly as it did for React. The key generated files:

• src/main.js — the entry point; mounts the root App component onto the page.
• src/App.vue — the root SFC, the first component you'll edit.
• index.html — the single real HTML page everything mounts into, just like React's.

Mounting the Root Component

createApp(App).mount('#app') is Vue's bootstrap — it takes the root component and attaches it to the <div id="app"> in index.html, the direct equivalent of React's createRoot(...).render(<App />) or Angular's bootstrapApplication(AppComponent). Everything else renders inside that root.

Coding Challenges

Chapter 1's interpolated values were constants that never changed. The moment a value needs to change and have the UI update, it must be reactive — Vue's tracking system that re-renders the template when a value changes. In the Composition API, the core tool for that is ref.

ref — A Reactive Value

ref(0) creates a reactive container holding 0. The catch that trips up everyone at first: in the <script>, you read and write the value through .value (count.value++) — but in the <template>, Vue unwraps it automatically, so it's just {{ count }}, no .value. This is Vue's equivalent of React's useState, but with two key differences: there's no separate setter function (you assign to .value directly), and the same ref is used both to read and to update.

Why Not a Plain Variable?

A plain let count = 0 increments fine in memory, but Vue isn't tracking it — nothing tells the framework the UI needs re-rendering, so the displayed number never changes. Exactly the same trap as a plain variable in React (Fundamentals Chapter 3). ref is what makes the value reactive; the change to .value is what Vue detects.

reactive — For Objects

reactive is an alternative for objects, making the whole object reactive with no .value — properties are accessed directly (state.age++). In practice, many Vue developers use ref for everything (it works for objects too, via ref({...}).value) to avoid juggling two mental models, but reactive is common and worth recognizing. The trade-off: reactive only works on objects/arrays, and you lose reactivity if you destructure it.

Expressions in the Template

Interpolation isn't limited to a bare value — any single JavaScript expression works inside {{ }}: arithmetic, method calls, ternaries. The same as React's curly braces, and like Angular's interpolation, it's expressions only (no statements like if or for — those have their own directives, next chapter).

Coding Challenges

Interpolation (Chapter 2) only handles text content between tags. For everything else — setting an attribute, responding to an event, syncing a form input — Vue uses directives: special v- prefixed attributes, the same conceptual mechanism as Angular's bindings, just with different syntax. These three are the workhorses.

v-bind — Binding an Attribute

v-bind binds an attribute to a reactive expression rather than a static string — :disabled="isSaving" sets the real boolean disabled property from the isSaving ref. The : shorthand is near-universal in real code. This is the exact equivalent of Angular's [disabled]="isSaving" (square brackets) and serves the same purpose as React's disabled={isSaving} — passing a real value, not a string.

v-on — Listening for Events

v-on attaches an event listener — already used informally in earlier chapters via its @ shorthand. @click="increment" is Vue's version of Angular's (click)="increment()" and React's onClick={increment}. Two conveniences: you can write a method name (@click="increment") or an inline expression (@click="count++"), and the native event object is available as $event when you need it (@input="onInput($event)").

v-model — Two-Way Binding

v-model keeps a form input and a ref synchronized in both directions automatically — typing updates name, and changing name in code updates the input. This is the same end result as Angular's [(ngModel)], and it collapses React's manual controlled-input pattern (value + onChange, Fundamentals Chapter 7) into a single directive. Under the hood it's just :value + @input combined — a shorthand Vue provides, and one you'll build yourself on a custom component in Chapter 7.

v-model on Other Input Types

v-model automatically adapts to the input type — a checkbox binds to a boolean, a <select> binds to the chosen option's value, radio buttons to the selected value, all with the same v-model attribute. This is noticeably less fiddly than React, where a checkbox needed checked/e.target.checked while a text input needed value/e.target.value (Fundamentals Chapter 7) — Vue figures out the right property and event for you.

Coding Challenges

React handles conditionals and lists with plain JavaScript in JSX (ternaries, &&, .map()); Angular uses @if/@for blocks. Vue uses directives on the element itself — v-if and v-for — closer to Angular's older *ngIf/*ngFor style, but with their own conveniences.

v-if / v-else-if / v-else

v-if conditionally renders an element based on a truthy expression, with optional v-else-if and v-else chained on adjacent elements. Like Angular's @if (and unlike a CSS display: none), a false v-if genuinely removes the element from the DOM entirely. The full v-if/v-else-if/v-else chain neatly handles the loading/error/success pattern that ran through the React projects, without a lookup object or chained ternaries.

v-show — Toggle Visibility, Keep It in the DOM

v-show looks similar but works differently: the element stays in the DOM and is toggled with CSS display. Use v-if when the element is rarely shown or expensive to create (it's truly added/removed); use v-show when toggling frequently (e.g. a dropdown), since flipping a CSS property is cheaper than repeatedly creating and destroying the element. This explicit choice is something React and Angular handle more implicitly — Vue names it directly.

v-for — Rendering a List

v-for="item in items" repeats the element once per array entry — Vue's .map() equivalent. The :key binding is required (using v-bind from Chapter 3) and serves the identical purpose as React's key and Angular's track: a stable, unique identifier so Vue can update the DOM efficiently when the list changes. A real object array keys on its id:

v-for with an Index

A second variable in parentheses gives the current index — (todo, index) in todos — useful for numbering. Note the index is the position, not a good :key on its own (same caution as React's array index): prefer a stable id for the key whenever one exists.

The <template> Wrapper

To repeat or conditionally render multiple elements without adding a wrapper element to the DOM, put the directive on a <template> tag — an invisible grouping element that renders only its contents. This is Vue's equivalent of React's fragment (<>...</>), used here specifically to attach a directive to a group.

Coding Challenges

Chapter 2 put a {{ price * quantity }} expression directly in the template. That works, but repeating it or running heavier logic inline gets messy fast. Computed properties are Vue's clean way to derive a reactive value from other reactive values; watchers are for running a side effect when something changes. Both will feel familiar from React's useMemo and useEffect — but with Vue's automatic dependency tracking.

computed — A Derived Reactive Value

computed(() => ...) returns a ref-like value that automatically recalculates whenever any reactive value it reads changes — here, whenever price or quantity changes. Two important properties: it's cached (only recomputes when a dependency actually changes, not on every render), and its dependencies are auto-tracked — there's no dependency array to maintain, unlike React's useMemo. Vue knows total depends on price and quantity simply because the function read them. In the template it's used as {{ total }} (auto-unwrapped, no .value); in script you'd read total.value.

Computed vs a Method

You could call a regular method in the template instead — but a method re-runs every time the component re-renders for any reason, even if its inputs didn't change. A computed caches its result and only recomputes when a dependency genuinely changes. For anything beyond a trivial expression, prefer computed — the caching is free performance.

Filtering a List with computed

This is the clean fix for Chapter 4's "don't combine v-if and v-for" rule: a computed property returns exactly the items that should be shown, and the template does v-for="todo in visibleTodos". The filter recomputes automatically when either todos or showCompleted changes — the same "filter before mapping" pattern React used in Fundamentals Chapter 6, here expressed reactively.

watch — Running a Side Effect on Change

watch runs a callback whenever a specific reactive source changes, receiving both the new and old value. It's for genuine side effects in response to a change — fetching data, saving to localStorage, logging — the role React's useEffect with a dependency plays. The key distinction from computed: computed derives and returns a value; watch does something and returns nothing. If you find yourself assigning to another ref inside a watch, a computed is usually the better tool.

watchEffect — Auto-Tracked Watching

watchEffect is a variant that runs immediately and re-runs whenever any reactive value it reads changes — automatically tracked, no explicit source to name. It's closer in feel to React's useEffect with auto-detected dependencies. Use watch when you need the old value or want to watch one specific source; use watchEffect when you just want "re-run this whenever anything it uses changes."

Coding Challenges

Chapter 1's child components were static. Props make a component reusable by letting a parent pass data into it — the same concept as React props and Angular @Input. In <script setup>, props are declared with the compiler macro defineProps.

Declaring Props with defineProps

defineProps(['name', 'age']) declares the props this component accepts. It's a compiler macro — no import needed; Vue's compiler recognizes it inside <script setup>. In the template, props are used directly by name ({{ name }}), just like a local ref. In the script, they're accessed via the returned object (props.name).

Passing Props from a Parent

Import the child, then place its tag with the props as attributes. The crucial detail, carried over from v-bind in Chapter 3: name="Philip" (no colon) passes the literal string "Philip", but :age="35" (with the colon) evaluates as an expression and passes the real number 35. Forgetting the colon on a number/boolean/array prop passes a string instead — the same string-vs-expression distinction as React's quotes-vs-curly-braces and Angular's plain-vs-bracket attributes.

Typed Props with Defaults and Validation

The object form of defineProps adds type checking, a required flag, and default values — Vue warns in the console if a required prop is missing or the wrong type is passed. This is richer than React's plain props (which need PropTypes or TypeScript for the same), and comparable to Angular's typed @Input. Defaults work like Angular's, supplying a fallback when the parent omits the prop entirely.

Passing Different Data Types

Anything that isn't a plain string needs the : binding. Note also the naming convention: a prop declared as inStock (camelCase in JS) is passed as :in-stock (kebab-case in the template) — Vue maps between them automatically, the standard HTML-attribute convention. You can use camelCase in the template too, but kebab-case is the common style.

Coding Challenges

Props (Chapter 6) flow data down into a child. To send something back up — a click, a deletion, a new value — a child emits an event that the parent listens for. This is Vue's counterpart to React's "pass a callback down" and Angular's @Output/EventEmitter. Declared with the defineEmits macro.

Emitting an Event with defineEmits

defineEmits(['delete']) declares which events this component can emit and returns an emit function. Calling emit('delete', id) fires the delete event with id as its payload. The parent listens with the @ event syntax from Chapter 3 — @delete="removeTodo" — and removeTodo receives the emitted id as its argument. Structurally identical to Angular's @Output, and the same role as a React callback prop, but modeled as a custom event the child raises (like Angular, unlike React).

Multiple Events and Validated Emits

A component can declare several events in the array. The object form additionally lets you validate each event's payload with a function (Vue warns if it returns false) — useful documentation of what each event carries, comparable to typing an Angular EventEmitter<T>.

v-model on a Component

Chapter 3 used v-model on a native <input>. You can also put v-model on a custom component, to build something like a reusable input control with two-way binding. Under the hood, v-model on a component is shorthand for a modelValue prop plus an update:modelValue event:

The child takes the current value via the modelValue prop, binds it to its real input with :value, and emits update:modelValue whenever the input changes. The parent then uses plain v-model="name" — Vue wires the prop and event together automatically. This is the exact convention Angular uses for custom two-way binding (value + valueChange), and it's why v-model on native inputs "just works": those are built on the same mechanism.

Coding Challenges

Props pass data into a child. Slots pass markup — letting a parent drop arbitrary template content inside a child component. This is Vue's direct equivalent of React's children (Fundamentals Chapter 9) and Angular's <ng-content>, and it's how you build flexible wrappers like cards, modals, and layouts that don't need to know what's placed inside them.

The Default Slot

The <slot></slot> element is a placeholder — whatever the parent writes between the component's opening and closing tags gets rendered there. Card doesn't know or care it's rendering an <h2> and a <p>; it just wraps whatever it's given. This is exactly React's {children}, just declared with a <slot> tag in the template rather than read as a prop.

Fallback (Default) Content

Content placed inside the <slot> tag is fallback content — shown only when the parent passes nothing. A small convenience React lacks built-in (you'd write {children ?? 'fallback'} by hand); in Vue it's just whatever you put between the slot tags.

Named Slots — Multiple Insertion Points

When a component needs several insertion points, give each <slot> a name. The parent targets a named slot with <template #header> (the # is shorthand for v-slot:header); anything not wrapped in a named template goes into the default slot. This is cleaner than React's approach for multi-region layouts, where you'd pass JSX through several separate named props (the SplitLayout pattern from React Fundamentals Chapter 9) — Vue keeps it all between one set of component tags.

Scoped Slots — Passing Data Back to the Slot Content

A scoped slot lets the child pass data up to the markup the parent provides — the child binds values onto its <slot> (:todo="todo"), and the parent receives them by destructuring in v-slot (#default="{ todo }"). This is the powerful case: TodoList owns the looping and data, but the parent decides exactly how each item looks. It's the direct equivalent of React's render-props pattern (Advanced Chapter 5) — "the component owns behavior, the caller controls rendering" — but expressed declaratively in the template.

Coding Challenges

A component is created, mounted to the DOM, updates as its data changes, and is eventually unmounted. Lifecycle hooks let you run code at these moments — most often to do setup work after mounting (like fetching data) and cleanup before unmounting (like clearing a timer). In the Composition API, these are functions you call inside <script setup>.

onMounted — After the Component Is in the DOM

onMounted registers a callback that runs once, right after the component is inserted into the DOM — the standard place for an initial data fetch, the equivalent of React's useEffect(() => {...}, []) and Angular's ngOnInit. By this point the real DOM exists, so it's also safe to access template elements (via template refs) here. Note you can pass an async function directly — Vue doesn't have React's restriction about effect callbacks not being async.

onUnmounted — Cleanup Before Removal

onUnmounted runs just before the component is destroyed — the place for cleanup, mirroring React's useEffect cleanup function and Angular's ngOnDestroy. The same universal rule applies: anything that "starts" something ongoing (a timer, an event listener, a subscription) needs a matching "stop" here, or it leaks. A setInterval not cleared in onUnmounted keeps firing after the component is gone.

onUpdated — After a Re-render

onUpdated runs after the component re-renders due to a reactive change and the DOM has been patched. It's used less often than onMounted/onUnmounted — for most "react to a value changing" needs, a watch (Chapter 5) targeting the specific value is cleaner and more precise than this catch-all "something updated" hook.

The Common Pattern — Mount + Cleanup Together

Setup in onMounted paired with matching teardown in onUnmounted is the everyday pattern — adding then removing an event listener, starting then stopping a subscription. In Chapter 10 you'll see how a composable bundles this paired logic into one reusable function, so the mount/unmount pairing lives in one place rather than scattered across every component that needs it — Vue's equivalent of a React custom hook with a cleanup return.

Coding Challenges

A composable is a function that uses Vue's reactivity (ref, computed, lifecycle hooks) to package up reusable, stateful logic — exactly what React custom hooks do, and what Vue calls its own version of the pattern. There's no special syntax: it's just a plain function, by convention named useSomething, that calls reactivity APIs inside and returns reactive values.

A First Composable — useCounter

useCounter bundles a ref and its behaviour into one reusable function, returning the reactive count and the functions to change it. Any component imports it and destructures what it needs — and crucially, each call creates its own independent state, just like calling a React hook. This maps directly onto React's useToggle from Intermediate Chapter 4; the only real syntax difference is returning an object (so you destructure by name) rather than a tuple.

A Composable with Lifecycle — useMousePosition

This is the real payoff teased in Chapter 9: the onMounted/onUnmounted listener-pairing — the kind of thing you'd otherwise repeat in every component needing mouse position — lives in one composable. A composable can call lifecycle hooks itself, and Vue ties them to whichever component is using it. Any component just does const { x, y } = useMousePosition() and gets a self-cleaning, reactive position — the setup and teardown handled automatically.

useLocalStorage — A Persisted ref

The same useLocalStorage that was a React custom hook (Intermediate Chapter 4) and an Angular signal+effect (Angular Chapter 13) — here, a composable combining a ref initialized from storage with a watch that re-saves on every change. const notes = useLocalStorage('notes', []) returns a normal-looking ref that transparently persists. The { deep: true } option makes the watch fire on nested changes inside objects/arrays, not just reassignment.

Coding Challenges

Routing in Vue is its own official package (vue-router), like React Router was a separate install — but the concepts are now thoroughly familiar from both the React and Angular courses. Define routes mapping paths to components, render the matched one in an outlet, link without reloading, read params, navigate from code, and guard routes. Same ideas, Vue's API.

Defining Routes

Routes are an array of { path, component } objects, the same shape as Angular's route config and React Router's <Route> list. :id is a dynamic segment; /:pathMatch(.*)* is Vue Router's (slightly cryptic) catch-all for unmatched URLs. createWebHistory() enables clean URLs (no #). The router is then registered in main.js with app.use(router) — the same plugin pattern Pinia will use next chapter.

RouterView and RouterLink

<RouterView /> is the outlet where the matched route's component renders — the equivalent of React Router's <Outlet /> and Angular's <router-outlet>. <RouterLink to="/about"> navigates without a full page reload, like React's <Link> and Angular's routerLink. A RouterLink automatically gets an active CSS class when its route is current, so highlighting the active nav item needs no manual URL comparison.

Reading Route Params with useRoute

useRoute() returns the current route object; route.params.id reads the :id segment — the equivalent of React Router's useParams() and Angular's ActivatedRoute.paramMap. The route object is reactive, so if the same component stays mounted while only the param changes (navigating /product/1 → /product/2), a watch (Chapter 5) on route.params.id reacts to that change.

Programmatic Navigation with useRouter

useRouter() returns the router instance; router.push(...) navigates from code — after a form submits, a login succeeds, an action completes — the equivalent of React Router's useNavigate() and Angular's Router.navigate(). Note the two distinct hooks: useRoute (singular, the current route's data) vs useRouter (the router, for navigating) — an easy pair to mix up by name.

Navigation Guards

A navigation guard runs before each route change — beforeEach receives the target (to) and current (from) routes, and either allows navigation (return true or nothing) or redirects (return a path). This is Vue's equivalent of Angular's canActivate guard, and the standard way to keep unauthenticated users out of protected pages. Guards can also be defined per-route (beforeEnter) or inside a component.

Coding Challenges

For state shared across many distant components, Vue's official answer is Pinia. Like Zustand and Redux for React, or a service for Angular, it holds state outside the component tree so any component can reach it — but a Pinia store is built from the very same reactivity primitives you already know (ref, computed), making it feel like a composable that happens to be global.

Defining a Store

defineStore('counter', () => {...}) — the "setup store" form — is essentially a composable: declare refs (the state), computeds (derived values, called "getters"), and functions (the "actions") inside, and return them. The first argument is a unique store id. If this looks almost identical to a composable from Chapter 10, that's the point — the difference is that a Pinia store is a single shared instance, not fresh state per call.

Setup, and Using the Store

Register Pinia once with app.use(createPinia()) (the same plugin pattern as the router). Then any component calls useCounterStore() and accesses store.count, store.double, store.increment — and two completely unrelated components calling it share the exact same state, no props or events between them. This is the same problem Context/Zustand solved in React and a service solved in Angular, here with Vue's own reactivity underneath.

Data Fetching Inside a Store

An action can be async — so a store is a natural home for API calls, exactly as a service was in Angular (Chapter 11). The status ref drives loading/error/success rendering, the same single-status pattern used across the React projects. A component calls store.fetchUsers() in onMounted and reads store.users/store.status in the template — and because the result lives in the store, several components share the fetched data without re-requesting it, the same benefit React Query gave (React Advanced Chapter 2).

Coding Challenges