# Vue.js path

> A step-by-step path to learning Vue.js: what to know first, 14 stages from your first component to Vue Router and Pinia, the official docs and videos for each, and projects to build.

Page: https://haythamasalama.me/learn/vue

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.

Source: https://github.com/Haythamasalama/vue-path

## Before you start

- **HTML**
- **CSS**: Flexbox, Grid, Positioning
- **JavaScript**: Higher-order functions, Arrow functions, Destructuring, The DOM
  - [Learn JavaScript in Arabic, Elzero Web School (lessons 71 to 78 and 86 to 101)](https://www.youtube.com/playlist?list=PLDoPjvoNmBAx3kiplQR_oeDqLDBUDYwVv)

## The path

### Stage 1: What is Vue?

- Single-page applications (SPA)
- Server-side rendering (SSR)
- Why Vue

Resources:

- [Vue.js Crash Course, Traversy Media](https://www.youtube.com/watch?v=VeNfHj6MhgA)

### Stage 2: Install Vue

- From a CDN (an overview)
- Vue CLI (an overview)
- Create a Vue application with npm

Resources:

- [Quick start: creating a Vue application](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)

### Stage 3: Your first component

- What a component is
- The script tag
- The template tag
- The style tag

### Stage 4: 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: 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

Resources:

- [Template syntax](https://vuejs.org/guide/essentials/template-syntax.html)
- [Conditional rendering](https://vuejs.org/guide/essentials/conditional.html)
- [List rendering](https://vuejs.org/guide/essentials/list.html)
- [Event handling](https://vuejs.org/guide/essentials/event-handling.html)
- [Class and style bindings](https://vuejs.org/guide/essentials/class-and-style.html)

### Stage 7: Reactivity

- ref
- reactive

Resources:

- [Reactivity fundamentals](https://vuejs.org/guide/essentials/reactivity-fundamentals.html)

### Stage 8: Computed properties

Resources:

- [Computed properties](https://vuejs.org/guide/essentials/computed.html)

### Stage 9: Forms and v-model

Resources:

- [Form input bindings](https://vuejs.org/guide/essentials/forms.html)

### Project: Build it: a to-do list

- Add a task
- Edit a task
- Delete a task
- Mark a task as done

### Stage 10: Components

- Registration
- Props
- Events
- Slots
- Provide and inject
- Async components

Resources:

- [Component registration](https://vuejs.org/guide/components/registration.html)

### Stage 11: Watchers

Resources:

- [Watchers](https://vuejs.org/guide/essentials/watchers.html)

### Stage 12: Lifecycle hooks

Resources:

- [Lifecycle hooks](https://vuejs.org/guide/essentials/lifecycle.html)

### Stage 13: Composables

Resources:

- [Composables](https://vuejs.org/guide/reusability/composables.html)

### Project: Build it: a weather app

Follow a full project from start to finish, then build one of your own.

Resources:

- [Weather App Build (with Vue 3 & Tailwind CSS), Net Ninja](https://www.youtube.com/playlist?list=PL4cUxeGkcC9hfoy8vFQ5tbXO3vY0xhhUZ)

### Stage 14: Going further

- TypeScript with the Composition API
- Vue Router
- State management with Pinia

Resources:

- [TypeScript with the Composition API](https://vuejs.org/guide/typescript/composition-api.html)
- [Vue Router](https://router.vuejs.org/)
- [Vue JS 3 Tutorial for Beginners #8, The Vue Router, Net Ninja](https://www.youtube.com/watch?v=juocv4AtrHo)
- [Vue 3 Composition API Tutorial #6, Vue Router, Make Apps with Danny](https://www.youtube.com/watch?v=UCI9dO4Vxvk)
- [Pinia](https://pinia.vuejs.org/)
- [State management in Vue.js v3, Into the Coding](https://www.youtube.com/watch?v=N5u49FSnlxc)
- [Pinia Crash Course #1, Net Ninja](https://www.youtube.com/watch?v=u0B9dysw29A)