Step 1 • Before You Start
Prerequisites — JS, Node, and HTML/CSS beginner Vue assumes solid JavaScript fundamentals — ES6+ (arrow functions, destructuring, spread, modules, optional chaining), Promises and async/await, the DOM API, and basic HTML/CSS. You should be comfortable with npm scripts and how a Node project is structured. Struggling with Vue is almost always struggling with JavaScript in disguise.
5h Step 2 • Before You Start
Project Setup with Vite and Vue 3 beginner Scaffold a Vue 3 project with Vite (npm create vue@latest), which gives you Vite, Vue Router, Pinia, TypeScript, ESLint, and Prettier choices. Understand the project structure (main.ts entry point, App.vue root component, index.html shell), how to run the dev server, and what vite.config.ts does. Add TypeScript for type safety and configure path aliases (@/ → src/).
3h Step 3 • Foundations
Template Syntax and Directives beginner Vue templates are valid HTML enhanced with directives. Learn text interpolation ({{ }}), attribute binding (v-bind / :), event handling (v-on / @), conditional rendering (v-if, v-else-if, v-else, v-show), list rendering (v-for with key), and the difference between v-if and v-show (DOM removal vs CSS). Understand how template expressions are sandboxed and why you can't use arbitrary JS statements in them.
5h Step 4 • Foundations
Reactivity — ref, reactive, and computed beginner The heart of Vue 3 is its reactivity system. Understand ref() for primitive values (accessing via .value), reactive() for objects, why you shouldn't destructure reactive objects (use toRefs()), computed() for derived state (lazy, cached, getter-only vs getter+setter), and readonly(). Learn how Vue tracks dependencies through Proxy and triggers re-renders only for affected components.
6h Step 5 • Foundations
Components, Props, and Emits beginner Vue apps are trees of components. Define props with defineProps<{}>() (TypeScript generics) and emit events with defineEmits<{}>(), both are macros that disappear at compile time. Learn prop validation, default values, required vs optional props, the prop/emit contract as a component's public API, and why you should never mutate props directly. Understand single-file components (.vue — template, script setup, style).
6h Step 6 • Foundations
Lifecycle Hooks and Watchers beginner Learn when Vue components mount, update, and unmount — onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted. Use onMounted for DOM access and side effects (fetch, subscriptions) and onUnmounted for cleanup. Understand watch() vs watchEffect() — watch is explicit about its source, watchEffect auto-tracks all dependencies. Use deep watchers carefully (expensive). Understand why most watchers are replaced by computed().
5h Step 7 • Components In Depth
Slots, Provide, and Inject intermediate Slots let a parent inject template content into a child — default slots, named slots (<template
5h Step 8 • Components In Depth
Forms and v-model intermediate v-model is two-way binding sugar — on a native input it's :value + @input, on a component it's :modelValue + @update:modelValue. Build custom v-model components with defineModel() (Vue 3.4+). Handle form validation with VeeValidate and Zod — integrate schema validation so errors surface without manual if-chains. Understand input types (text, checkbox, radio, select, file), .lazy, .number, .trim modifiers, and dynamic form generation from a schema.
6h Step 9 • Routing
Vue Router — Routing and Navigation intermediate Vue Router is the official router. Learn createRouter() + createWebHistory(), defining routes (path, component, name, meta), router-view and router-link, programmatic navigation (router.push, router.replace), route params and query strings, nested routes, lazy-loaded routes (dynamic import()), navigation guards (beforeEach, beforeEnter, in-component guards), and route meta for auth. Understand history vs hash mode and how to configure your server for SPA fallback.
7h Step 10 • State Management
State Management with Pinia intermediate Pinia is the official Vue 3 state management library, replacing Vuex. Define stores with defineStore() using setup syntax (refs + computed + functions) or options syntax. Understand state (reactive data), getters (computed), and actions (methods, async-friendly). Use storeToRefs() to destructure without losing reactivity. Persist state with pinia-plugin-persistedstate. Understand when component-local state is enough vs when a shared store is justified.
6h Step 11 • Patterns
Composables and VueUse intermediate Composables are functions that use Vue reactivity APIs and encapsulate stateful logic — the Vue 3 answer to mixins. Learn to write composables (useCounter, useFetch, useEventListener) that return reactive refs. Understand the composable convention — names start with "use", they're called at setup time, they handle cleanup with onUnmounted. Explore VueUse — a collection of 200+ ready-made composables (useFetch, useLocalStorage, useIntersectionObserver, useDark, useBreakpoints). Don't reinvent the wheel.
6h Step 12 • Patterns
Async Components and Suspense intermediate Split your bundle with defineAsyncComponent() — loads the component chunk only when it's needed, with a loading and error fallback component. <Suspense> coordinates multiple async components with default and fallback slots, reducing loading state boilerplate. Learn how to use <Suspense> with async setup() functions and top-level await. Understand how Vite handles code splitting and what ends up in which chunk using rollup-plugin-visualizer.
4h Step 13 • Patterns
Transitions and Animations intermediate Vue's <Transition> component applies CSS classes (v-enter-from, v-enter-active, v-enter-to, v-leave-from, v-leave-active, v-leave-to) when elements enter or leave the DOM. Use with CSS transitions or animations. <TransitionGroup> handles lists (adds move transitions for FLIP animations). Learn the appear prop for initial render, JavaScript hooks for GSAP/Web Animations API integration, and mode="out-in" for route transitions. Prefer CSS transitions over JS where possible for performance.
4h Step 14 • TypeScript Integration
TypeScript with Vue 3 intermediate Vue 3 is written in TypeScript and has first-class TS support via script setup. Learn to type props with defineProps<{}>() generics, type emits with defineEmits<{}>(), type ref<T>(), type computed, and type provide/inject with typed injection keys (InjectionKey<T>). Understand how to use component instance types (InstanceType<typeof MyComp>), type slots, and configure tsconfig.json for Vue (include vue-tsc). Use vue-tsc for type checking in CI.
6h Step 15 • Testing
Testing with Vitest and Vue Test Utils intermediate Test Vue components with Vitest (Jest-compatible, Vite-native) and Vue Test Utils (VTU). Learn to mount components (mount vs shallowMount), query the DOM (getByText, findByRole), trigger events (await wrapper.trigger()), test async state updates (await nextTick()), stub child components, and mock Pinia stores. Write integration tests that test user behavior, not implementation details. Add Playwright or Cypress for end-to-end tests.
8h Step 16 • Performance
Performance Optimization advanced Vue is fast out of the box, but large apps need care. Learn v-once (render once, skip future updates), v-memo (memoize subtrees by dependency array), shallowRef/shallowReactive (skip deep tracking), functional components (stateless, no instance overhead), keepAlive (cache route components), and virtual scrolling for huge lists (vue-virtual-scroller). Profile with Vue DevTools performance timeline. Understand the compiler's optimizations (static hoisting, tree-flattening) and what breaks them.
5h Step 17 • SSR & Meta-Frameworks
SSR and Nuxt 3 advanced Nuxt 3 is the Vue meta-framework for server-side rendering (SSR), static site generation (SSG), and hybrid rendering. Learn Nuxt's file-based routing (pages/ directory), auto-imports (no more import statements for components/composables), server routes (server/api/), useFetch and useAsyncData for SSR-aware data fetching, and Nitro server engine. Understand when to use SSR vs SSG vs SPA mode, hydration and its pitfalls, and how to deploy to Vercel, Netlify, or a Node server.
10h Step 18 • Production
Production Patterns and Deployment advanced Ship Vue apps with confidence. Configure environment variables with Vite's import.meta.env, set up error boundaries with onErrorCaptured, integrate Sentry for runtime error tracking, handle meta tags and SEO (useHead with @vueuse/head or Nuxt), configure CSP headers, set up a CI/CD pipeline with GitHub Actions (lint + type check + test + build), and deploy to Vercel/Netlify with preview deployments. Understand how to monitor Core Web Vitals post-deploy.
6h 