Vue.js tutorial

Build reactive web apps with Vue 3, TypeScript or JavaScript, one component at a time.

Start the course

Course contents

Vue Foundations

  1. Introduction to Vue — What Vue is and why it was created, the progressive framework idea, the Vue ecosystem, Vue 2 vs Vue 3, Options API vs Composition API, CDN vs Vite, creating and running a project, its files, and your first app with createApp(), mount(), ref() and a click.
  2. Templates and Directives — Declarative rendering, text interpolation with {{ }}, JavaScript expressions in templates and their limits, the parts of a directive, v-bind and its : shorthand, boolean and multiple attributes, v-html and XSS, v-text, v-once, v-memo, v-pre, v-cloak and template scope.

Reactivity

  1. Reactive State — What reactivity is, <script setup> and top-level bindings, ref() and .value, unwrapping in templates, reactive() and proxies, the limits of reactive() and the destructuring problem, ref vs reactive, reactive arrays, Map and Set, DOM update timing with nextTick(), and typing state in TypeScript.
  2. Computed Properties and Watchers — computed() and caching, computed vs functions, writable computed, watch() on refs, getters, reactive objects and many sources, deep, immediate and once, watchEffect() and flush timing, stopping a watcher, onWatcherCleanup() for stale requests, and when to use computed or a watcher.

Rendering

  1. Dynamic Rendering — Class bindings with objects and arrays, classes on components, style bindings with units and CSS variables, v-if, v-else-if and v-else, truthy and falsy conditions, how v-if destroys state, forcing a fresh copy with :key, template groups, v-show, and when to choose v-if or v-show.
  2. List Rendering — v-for over arrays, objects and ranges, item, index, key and value, why every item needs a stable key and why not the index, v-for on <template>, components in lists, why v-if and v-for do not share an element, filtering and sorting with computed, and array change detection.

User Interaction

  1. Events and Forms — v-on and @, method and inline handlers, $event, key aliases, system keys, .exact and event modifiers, then v-model on every control, value bindings, .lazy, .number and .trim, submit and reset, validation rules, error messages, accessible errors with useId() and validation libraries.

Components

  1. Components and Single-File Components — What components are, component trees, parent and child, the blocks of a Single-File Component, independent instances, local and global registration, naming rules, scoped styles, :deep(), CSS modules, v-bind() in CSS and defineOptions(), and Tailwind CSS and UI libraries.
  2. Props and Events — defineProps() with runtime and type-based declarations, prop types, required props, defaults and validators, reactive props destructure, one-way data flow, deriving local values, $emit and defineEmits(), typed events, component v-model with defineModel(), many models and modifiers, and how components talk.
  3. Slots, Attributes and Provide/Inject — Default, fallback, named, dynamic and scoped slots, renderless components, $slots, useSlots() and defineSlots(), then fallthrough attributes, inheritAttrs: false, $attrs and useAttrs(), many roots, provide() and inject(), reactive provided values, app-level provide and InjectionKey.
  4. Lifecycle and Template Refs — The life of a component from creation to mount, update and unmount, the Composition API lifecycle hooks with an Options API mapping, template refs with useTemplateRef(), refs inside v-for, component refs and defineExpose(), and common uses: DOM access, listeners, timers, requests and cleanup.

Options API

  1. Options API — When you will meet the Options API, data(), methods, computed and watch, this and $watch, lifecycle hooks in Options style, defineComponent() for TypeScript, mixins with their merging rules and limits, composables as the modern fix, and a side-by-side table of both styles.

Reusability

  1. Composables, Directives and Plugins — Composables: use naming, extracting logic, returning refs, toValue() and MaybeRefOrGetter, cleanup, useMouse, useEventListener, useFetch and VueUse. Custom directives: hooks, value, argument, modifiers, function shorthand and registration. Plugins: app.use(), install, options, globalProperties, provide and vue-i18n.
  2. Advanced Reactivity — readonly(), shallowReadonly() and isReadonly(), shallowRef(), shallowReactive() and triggerRef(), toRef(), toRefs(), isRef() and unref(), toRaw() and markRaw(), a debounced ref with customRef(), and grouping effects with effectScope().
  3. TypeScript with Vue — Adding types to Vue code: props, emits and v-model, refs, reactive objects, computed values and template refs, provide/inject with InjectionKey, generic components, typed Pinia stores and route meta, env.d.ts and checking with vue-tsc.

Routing and State

  1. Vue Router Basics — Installing Vue Router, createRouter() and history modes, routes, RouterLink and RouterView, active link classes, useRouter() and useRoute(), params and query, optional, repeatable and pattern params, nested routes, named views, route props, named routes, redirects, aliases, a 404 page, and push, replace and go.
  2. Navigation Guards and Advanced Routing — Global guards (beforeEach, beforeResolve, afterEach), per-route beforeEnter, in-component onBeforeRouteLeave and onBeforeRouteUpdate, typed route meta, an auth guard with a redirect back, fetching data before or after navigation, scroll behaviour, lazy-loaded routes and moving focus after navigation.
  3. State Management with Pinia — Local vs shared state and when to use a store, createPinia(), option stores and setup stores, state, getters and actions, async actions with errors, storeToRefs(), $patch, $reset and resetting setup stores, stores using stores, stores outside components, $subscribe, $onAction, persistence and Pinia plugins.

Working with APIs

  1. HTTP Requests — HTTP, REST and JSON in plain words, fetch() for GET, POST, PUT, PATCH and DELETE with headers, bodies and query strings, response.ok and status codes, loading, success, empty and error states, refetching, stale responses and AbortController, Axios instances, interceptors and cancellation, a full CRUD screen, API service modules and env-based URLs.
  2. Authentication and Real-Time Data — Logging in with a token, where to keep tokens safely, sending the Authorization header, an auth store with Pinia, protecting routes, refreshing an expired token and retrying, logging out, and live data with polling, Server-Sent Events and WebSockets, with reconnect and cleanup.

Advanced Components

  1. Dynamic and Built-In Components — Switching components with <component :is>, async components with defineAsyncComponent() and their loading, error, delay and timeout options, code splitting, <KeepAlive> with include, exclude, max and activation hooks, <Teleport> for modals and overlays with focus handling, and the experimental <Suspense>.
  2. Transitions and Animations — The <Transition> component and its six CSS classes, named transitions, transition modes, CSS animations, custom class names, JavaScript hooks and :css="false", transitions between components, reusable transitions, <TransitionGroup> with keys, tag and move classes, state-driven animation and reduced motion.
  3. Render Functions and Component Patterns — h() and virtual nodes, props, children, components, slots, lists and conditions in render functions, templates vs render functions and JSX, and component patterns: presentational and container components, controlled components, headless components and generic components with generic="T", and Vue components as web components with defineCustomElement.

Rendering Modes

  1. How Vue Renders — What rendering means, the virtual DOM and patching, compiler hints such as static hoisting and patch flags, how an app starts and mounts, the update cycle and batching, what makes a component render again, using a key to force a fresh component, and client-side rendering with its benefits, limits and SEO.
  2. Server and Static Rendering — Server-side rendering with renderToString(), the request cycle, a fresh app per request and cross-request state pollution, hydration with createSSRApp(), mismatches and data-allow-mismatch, lazy hydration, onServerPrefetch and state transfer, browser-only code, static site generation, Vite SSR entry files, head tags with useSSRContext, streaming SSR, hybrid rendering with route rules, SWR, ISR and edge, and a mode comparison.
  3. Nuxt: Full-Stack Vue — What Nuxt adds to Vue, creating a Nuxt 4 project and its folders, auto-imports, file-based routing, layouts, useFetch and useAsyncData with keys and payload, server API routes with Nitro, route middleware, useState, SEO with useSeoMeta, runtime config, modules, rendering modes and deployment.

Production Vue

  1. Testing Vue Apps — Why and what to test, Vitest basics with describe, it and expect, Vue Test Utils: mount, find, trigger, setValue, text, props and emitted events, awaiting updates, testing composables and Pinia stores, and mocking fetch with vi.fn() and flushPromises().
  2. Performance — Measuring before optimising, stable props, computed stability, v-once and v-memo, virtual lists for huge data, shallow reactivity and markRaw, lazy loading and bundle size, tree shaking, and checking a production build with DevTools, Lighthouse and a bundle report, and accessibility: keyboard, labels, live regions and focus.
  3. Errors, Security and Deployment — onErrorCaptured and error boundaries, error propagation, app.config.errorHandler and warnHandler, friendly states for network, HTTP and validation errors, untrusted templates and v-html, validating external data, public env variables and secrets, folder structure and naming, .env files, modes and typed env, and building and deploying with a base path and SPA fallback, ESLint and Prettier, and a CI pipeline.

Capstone Project

  1. Capstone: Build Meera's Kitchen — Putting the whole course together in one app: a folder plan, a typed API service, a Pinia cart store, routed pages with loading and error states, a validated checkout form that posts an order, and tests for the store and a component.

Reference

  1. Vue Cheat Sheet — A quick reference for the whole Vue course: templates and directives, reactivity, rendering, events and forms, components, the Options API, composables, directives and plugins, routing, Pinia, HTTP, built-in components, transitions, rendering modes, testing, performance, errors and deployment.