Vu

Vue

intermediate

The Progressive JavaScript Framework.

Vue is a framework for building UIs that is intentionally approachable. You can start with a script tag and no build step, or use a full CLI-built SPA. Vue 3's Composition API is powerful and explicit, while its Options API keeps simple things simple. Often described as the best parts of Angular and React, without the downsides of either.

Web UIsSingle-Page AppsFull-stack (Nuxt)Progressive Enhancement
0%
0/7 lessons

Setup

Create a Vue project with Vite — the official and fastest setup. Vue also works as a CDN drop-in for progressive enhancement.

Bash
# Create a Vite-powered Vue app:
npm create vite@latest my-app -- --template vue
cd my-app
npm install
npm run dev

# With TypeScript:
npm create vite@latest my-app -- --template vue-ts

Lessons

1
Hello, Vue!
Vue's building block is the Single File Component (.vue file) — HTML, JavaScript…
→
2
Reactivity: ref & reactive
Vue's reactivity system tracks which data a template uses and only re-renders wh…
→
3
Template Directives
Vue's directives (`v-if`, `v-for`, `v-bind`, `v-on`, `v-model`) are the glue bet…
→
4
Components & Props
Vue components communicate via props (parent → child) and emits (child → parent)…
→
5
Composables
Composables are Vue 3's way of extracting and sharing reactive logic between com…
→
6
Mini Project: Todo App with Pinia
Build a fully featured todo app using Vue 3 + Pinia (Vue's official state manage…
→
7
Vue Cheatsheet
Composition API, template syntax, and reactivity on one page.
→