Skip to content

About Work Open Source Blog Contact

Vue.js path

Learn Vue one stage at a time, with two projects on the way. Most stages link to the part of the official docs that teaches them. Tick topics as you go: your progress stays in this browser.

14 stages
2 projects
34 topics
On GitHub

0 / 34 done

Before you start

HTML
CSSFlexbox · Grid · Positioning
JavaScriptHigher-order functions · Arrow functions · Destructuring · The DOMLearn JavaScript in Arabic, Elzero Web School (lessons 71 to 78 and 86 to 101)

The path

Stage 1 0/3
What is Vue?
- Single-page applications (SPA)
- Server-side rendering (SSR)
- Why Vue
- Vue.js Crash Course, Traversy MediaVideo
Stage 2 0/3
Install Vue
- From a CDN (an overview)
- Vue CLI (an overview)
- Create a Vue application with npm
- Quick start: creating a Vue applicationDocs
Stage 3 0/4
Your first component
- What a component is
- The script tag
- The template tag
- The style tag
Stage 4 0/2
Two ways to write components
An overview for now. From the next stages on, learn how each topic looks in both, but focus on the Composition API.
- Options API
- Composition API
Stage 5
The folder structure
An overview of where things live in a new project.
Stage 6 0/7
Template syntax
- Writing HTML in templates
- Attribute bindings
- v-if, v-else and v-else-if
- v-for
- v-bind
- v-on
- Class and style bindings
Stage 7 0/2
Reactivity
- ref
- reactive
- Reactivity fundamentalsDocs
Stage 8
Computed properties
- Computed propertiesDocs
Stage 9
Forms and v-model
- Form input bindingsDocs
Project 0/4
Build it: a to-do list
- Add a task
- Edit a task
- Delete a task
- Mark a task as done
Stage 10 0/6
Components
- Registration
- Props
- Events
- Slots
- Provide and inject
- Async components
- Component registrationDocs
Stage 11
Watchers
- WatchersDocs
Stage 12
Lifecycle hooks
- Lifecycle hooksDocs
Stage 13
Composables
- ComposablesDocs
Project
Build it: a weather app
Follow a full project from start to finish, then build one of your own.
- Weather App Build (with Vue 3 & Tailwind CSS), Net NinjaVideo
Stage 14 0/3
Going further
- TypeScript with the Composition API
- Vue Router
- State management with Pinia

© 2022–2026 Haytham A. Salama

Snippets Tools Uses Brand