Vue.js Mastery Path¶

Mastery Path

BOOTCAMP

VINOD BHANUJA

Vue is the framework people describe as approachable, and it is: you can add it to one page with a script tag, or scaffold a full application in a minute. What makes it worth studying in depth is that the approachable surface sits on a small, precise core — a reactivity system built on JavaScript proxies, a template compiler that knows which parts of your markup can change, and a renderer that uses that knowledge to do as little work as possible. Once you understand those three pieces, most Vue behaviour stops being surprising.

This course teaches Vue 3 with the Composition API and <script setup>, targeting Vue 3.5 with Vue Router 5, Pinia 4 and Vite 8 (the versions on npm while it was written). Level 1 builds a habit tracker from an empty folder: tooling, templates, ref/reactive/computed, watchers, props and emits, v-model, slots and transitions. Level 2 turns components into applications: composables, provide/inject, routing, Pinia, async data, form validation and TypeScript — ending with a routed recipe book. Level 3 goes under the hood: reactivity and rendering internals, directives and plugins, the built-in components, code splitting, performance, testing, accessibility and security — ending with an accessible Kanban board. Level 4 is production: server-side rendering by hand and with Nuxt, production builds, component libraries, architecture, Vue 2 migration, i18n, deployment and observability, finishing with a server-rendered capstone.

Every lesson has a How It Actually Works section — what the compiler turns a template into, why destructuring a reactive object silently breaks updates, how a computed knows when to recompute, why v-if and v-for on one element fail in Vue 3, how SSR state reaches the browser without an XSS hole.

Verified against real builds — and honest about what can't be run

The code in this course was built with Vite, tested with Vitest and Vue Test Utils, type-checked with vue-tsc, and — for anything interactive or server-rendered — run in a real browser or against a real server while writing. Output shown on these pages is output we actually observed, including first attempts that failed, because the diagnosis is usually the most useful part. Where something couldn't be run locally (a Docker image, a hosting provider, a hosted error service), the lesson says so.

How the program is organized¶

Level	Focus	Modules
Level 1 · Entry	What Vue is, create-vue & Vite, template syntax, `ref`/`reactive`/`computed`, watchers & lifecycle, props & emits, forms & `v-model`, slots, styling & transitions	9 topics + 1 project (a habit tracker)
Level 2 · Intermediate	Composables, provide/inject, Vue Router basics and in depth, Pinia, async data, form validation, TypeScript with Vue	9 topics + 1 project (a routed recipe book)
Level 3 · Advanced	Reactivity internals, the rendering mechanism, directives & plugins, Teleport/KeepAlive/Suspense, code splitting, performance, testing, accessibility, error handling & security	9 topics + 1 project (an accessible Kanban board)
Level 4 · Master	SSR from scratch, Nuxt, production builds, component libraries, large-app architecture, Vue 2 migration, i18n, deployment, observability	9 topics + 1 capstone (a server-rendered meetup app)

How to use this site¶

Build as you read. Scaffold a project in Level 1, lesson 02 and keep it open. Code blocks are titled with their file path (src/stores/recipes.ts) so you know where each piece lives, and each level's project reuses what the lessons built.
Open the browser devtools and the Vue devtools. Many lessons ask you to watch what re-renders, what the network did, or what the compiler produced — seeing it beats reading about it.
Know modern JavaScript first. Modules, destructuring, promises and async/await are assumed from lesson one; if they're shaky, start with JavaScript Mastery Path. Types appear from Level 2 onward — TypeScript Mastery Path covers them. For the server side of SSR, see Node.js Mastery Path; for end-to-end tests, Playwright Mastery Path; and to compare frameworks, React Mastery Path and Angular Mastery Path build similar projects.
Do the Exercise at the end of each lesson; the module-10 projects build on them.