How this Vue track works
- Real Vue 3 in the playground — Vue loads from CDN with the template compiler; your TypeScript compiles in the browser when you click Run in browser.
- Original lesson copy — we explain patterns and trade-offs in our own words; use official docs as reference, not a script to paste.
- Prerequisites — finish JavaScript (functions, objects, arrays, async) and TypeScript (types, interfaces). Vue builds on both.
Use printOutput(...) for terminal values and mountApp(App) when a lesson shows a live UI preview in #app.
Install on your device (macOS, Linux, Windows)
Lessons run in your browser on this site—install a modern browser and optional editor for local projects.
macOS
- Use Safari (preinstalled) or install Google Chrome / Firefox.
- Optional editor: VS Code (
brew install --cask visual-studio-code). - Open DevTools with ⌥⌘I (Chrome/Edge) or ⌥⌘C (Safari Web Inspector).
Linux
- Install Chromium or Firefox:
sudo apt update && sudo apt install -y chromium-browser firefox(Debian/Ubuntu; package names vary by distro). - Fedora:
sudo dnf install -y chromium firefox. - Optional editor: VS Code from code.visualstudio.com or
sudo snap install code --classic.
Windows
- Install Microsoft Edge or Chrome.
- Optional editor: VS Code (
winget install Microsoft.VisualStudioCode). - Open DevTools with F12 or Ctrl+Shift+I.
Verify: Open any lesson playground and click Run—output appears without installing a compiler.
Local projects: npm create vue@latest (Node.js required).
Vue is a progressive JavaScript framework for building user interfaces. You describe UI with templates (or render functions), bind them to reactive data, and Vue updates the DOM efficiently when state changes.
How this track differs from plain JavaScript
If you completed the JavaScript track, you already know variables, functions, and event listeners. Vue does not replace that knowledge—it organizes UI code into reusable components with a clear reactivity model.
Our TypeScript track teaches static types. Vue 3 pairs naturally with TypeScript: props, emits, and composables get typed interfaces, and editors catch mistakes before you run code.
Coming from the React track? Both solve “UI as a function of state.” Vue adds HTML-like templates, two-way form binding with v-model, and a progressive adoption path—you can sprinkle Vue on one page without rewriting an entire app.
What you will learn
- Template syntax, directives, and component composition
- Reactivity with
ref,reactive,computed, and watchers - Props down, events up, and slots for flexible layouts
- The Composition API:
setup(), lifecycle hooks, provide/inject, composables - Patterns that transfer to Vite, Nuxt, and production Vue codebases
Playground setup
Each lesson uses a TypeScript editor. Vue 3 loads from CDN in a sandboxed preview iframe. Early lessons use printOutput(...) only; from template syntax onward you call mountApp(App) to render UI above the terminal.
Self-check
- In one sentence, what problem does Vue solve compared to manual DOM updates?
- Why do we recommend JavaScript and TypeScript before this track?
Interview prep
- What is Vue in one sentence?
A progressive framework for building UIs with reactive data, templates, and a Composition API—incrementally adoptable from a widget to a full SPA.