Topolearn

Learn Vue

Progressive JavaScript framework with fine-grained reactivity and single-file components

25 lessons · 5 hours · 4 levels · covers Vue 3.5

Vue is a JavaScript framework for building user interfaces from components whose templates update automatically when reactive state changes. It scales from a sprinkle of interactivity on a page to full single-page apps with Vue Router and Pinia, and to server-rendered sites with Nuxt. Vue 3 centres on the Composition API, `<script setup>` single-file components and a Proxy-based reactivity system.

Sign in free to track progressOfficial docs ↗

Before you start

Vue builds on these; the tree links to the exact lessons you need.

JavaScriptPractical level

How deep do you want to go?

1. EssentialsRead and write simple code, do the everyday basics8 lessons · 1 hour in total
2. PracticalUse it productively at work, with the usual idioms17 lessons · 3 hours in total
3. AdvancedThe less common features, performance and trade-offs22 lessons · 4 hours in total
4. ExpertInternals and the edge cases experts know25 lessons · 5 hours in total

The Vue tree

VueCreating a Vue appCreating a Vue appTemplate syntax and v-bindTemplate syntax andv-bindReactive state: ref and reactiveReactive state: refand reactiveComputed propertiesComputed propertiesConditionals and listsConditionals and listsEvent handlingEvent handlingForm input bindings with v-modelForm input bindingswith v-modelComponents and propsComponents andpropsComponent events with defineEmitsComponent eventswith defineEmitsv-model on components (defineModel)v-model oncomponents (defin…Slots and scoped slotsSlots and scopedslotsWatchers and side effectsWatchers and sideeffectsLifecycle hooks and template refsLifecycle hooks andtemplate refsComposablesComposablesProvide / injectProvide / injectRouting with Vue RouterRouting with VueRouterState management with PiniaState managementwith PiniaModules: import and exportModules: import andexportArray methods: map, filter, reduceArray methods: map,filter, reduceHandling eventsHandling eventsasync and awaitasync and await
Essentials and Practical shown (17 of 25 lessons); the full list is below. Click a lesson to read it.

All 25 lessons, in order

Getting started

  1. Creating a Vue app · Essentials · 10 min

    Scaffold a Vite-powered Vue project, understand single-file components and mount the root component.

Templates

  1. Template syntax and v-bind · Essentials · 10 min

    Render data with mustache interpolation, bind attributes with v-bind (:), and understand what a directive is.

  2. Conditionals and lists · Essentials · 12 min

    Render conditionally with v-if / v-show and render lists with v-for and a stable :key.

  3. Event handling · Essentials · 9 min

    Listen to DOM events with v-on (@), call handlers with arguments, and use event and key modifiers.

  4. Form input bindings with v-model · Essentials · 10 min

    Keep form inputs and state in sync with v-model on text inputs, checkboxes, radios and selects.

Reactivity

  1. Reactive state: ref and reactive · Essentials · 12 min

    Declare state with ref() and reactive(), know when .value is needed and why destructuring can break reactivity.

  2. Computed properties · Essentials · 9 min

    Derive values from reactive state with computed(), which caches the result until a dependency changes.

  3. Watchers and side effects · Practical · 12 min

    Run side effects when state changes with watch and watchEffect, and clean up stale async work.

  4. Lifecycle hooks and template refs · Practical · 10 min

    Run code when a component mounts or unmounts and get direct access to DOM elements with useTemplateRef.

  5. Advanced reactivity APIs · Advanced · 13 min

    Control reactivity precisely with shallowRef, triggerRef, markRaw, toRaw, readonly, customRef and effectScope.

Components

  1. Components and props · Essentials · 12 min

    Split the UI into components, import and use them, and pass data down with defineProps.

  2. Component events with defineEmits · Practical · 9 min

    Let children notify parents by declaring and emitting custom events.

  3. v-model on components (defineModel) · Practical · 10 min

    Make your own components work with v-model using defineModel, including named and multiple models.

  4. Slots and scoped slots · Practical · 12 min

    Pass template content into components with default, named and scoped slots.

Composition & reuse

  1. Composables · Practical · 13 min

    Extract and reuse stateful logic in useXxx() functions built from refs, computeds, watchers and lifecycle hooks.

  2. Provide / inject · Practical · 9 min

    Pass data from an ancestor to any descendant without threading props through every level.

  3. Vue with TypeScript · Advanced · 13 min

    Type props, emits, models, refs, template refs, provide/inject and generic components, and check templates with vue-tsc.

  4. Custom directives and plugins · Advanced · 11 min

    Encapsulate low-level DOM behaviour in custom directives and package app-wide features as plugins.

Building apps

  1. Routing with Vue Router · Practical · 15 min

    Map URLs to components with Vue Router: routes, RouterView, RouterLink, params, lazy loading and guards.

  2. State management with Pinia · Practical · 13 min

    Share application state across components with Pinia stores: state, getters, actions and storeToRefs.

  3. Transition, Teleport and KeepAlive · Advanced · 13 min

    Animate entering and leaving elements, render modals outside the component tree and cache inactive components.

Internals & rendering

  1. Performance optimisation · Advanced · 14 min

    Find and fix slow Vue apps: lazy loading, stable props, v-once and v-memo, shallow state and list virtualisation.

  2. How reactivity works inside · Expert · 16 min

    Understand Vue's Proxy-based tracking: track and trigger, effects and subscribers, the scheduler and the 3.5 version-counting redesign.

  3. Compiler, virtual DOM and render functions · Expert · 16 min

    See how templates compile to render functions with patch flags, block trees and cached static content, and when to write render functions yourself.

  4. SSR, hydration and Nuxt · Expert · 15 min

    Render Vue on the server, hydrate it in the browser, avoid hydration mismatches and know what Nuxt adds.