The Complete Vue.js 3 Crash Course

A course covering Vue.js 3 from "hello, world" to fully fledged applications using Vuex and Vue Router. Start with a quick intro to the fundamentals, then build several example projects, each one building upon the fundamentals, designed to target a specific set of skills and techniques.

Repository • Course overview • Get started for free

Section 1: Vue.js Essentials

13 lectures (50min)

Course Introduction

Your first Vue.js App

Adding a Template Property

User Interactions with Methods

Control Flow with v-if and v-else

Loops with v-for

Computed Properties

Class Bindings

3:21

Input Validation

5:30

The Amazing v-model

3:37

Your First Component

2:25

Component Props

7:29

Child-Parent Communication with Events

5:39

Section 2: Project 1: User Sign-up Form with Validation

8 lectures (36min)

Single File Components

3:02

A Custom Button Component

6:20

Class Bindings Part 2

2:49

Custom Input Foundations

5:24

Dynamic Validation

5:50

Rethinking the Form State

5:21

Validating the Form

4:35

Submitting the Form and Finishing Up

3:01

Section 3: Project 2: Pokemon Evolutions

10 lectures (46min)

Project #2: Pokemon Evolutions

1:40

Creating the Card Foundations

2:09

Loading Remote Data with Fetch

5:11

Fetching Multiple Data Sources

4:39

Lifecycle Hooks

3:02

Rendering Content

3:51

Modular Components with Slots

8:05

Reusing Code to Fetch Evolutions

6:33

Better Styles with Class Bindings

3:56

Refactoring and Separation of Concerns

7:51

Section 4: Composition API Fundamentals

9 lectures (26min)

Composition Fundamentals Introduction

1:16

Hello, Composition API!

2:38

Reactivity with ref

5:10

Reactive for Complex Values

3:07

Composing Computed Properties

2:52

Watch and Watch Effect

2:23

Before and After with watch

4:26

Lifecycle hooks and Mixing the Options and Composition API

1:53

The useNumbers Composable

3:05

Section 5: Project 3: Microblogger with the Composition API

10 lectures (36min)

Project #3: Composing a Microblog

1:02

Creating the Microblog Store

2:46

Render Posts with the Card Component

4:17

The Hashtag Component

4:10

Emitting Events with the Composition API

6:13

Filtering Posts with Computed

4:18

Refactoring with the Posts Store

3:31

Liking a Post

4:49

Searching for Hashtags

3:04

Mind Blowing Fefactor and Exercises

2:32

Section 6: Vue Router Fundamentals

8 lectures (27min)

Welcome to Vue Router

1:00

Hello Vue Router

5:31

The Router Link component

3:53

Children and Nested Routes

3:13

Route Params with the Composition API

5:49

Route Params with the Options API

2:37

Watching route params for changes

2:45

Router Guards

2:29

Section 7: Vuex Fundamentals

9 lectures (35min)

Introduction to Vuex

1:59

Create a Vuex Store and State

4:10

Updating State with Mutations

4:12

More on Mutations

5:22

Dispatching Actions

3:04

Mocking the Server and Fetching Posts

3:36

Displaying a Post via Vuex

5:50

Vuex Modules

3:50

Vuex with the Composition API

3:26

Section 8: Capstone Project: (Vue + Vuex + Vue Router)

15 lectures (50min)

Introduction to the Capstone Project

0:28

Getting Started on the Capstore Project

3:26

Setting up Vuex

2:50

Scalable Layouts with Slots

2:52

Styling and Separating UI and Business Components

3:40

Fetching Albums with Fetch

3:06

Fetching Data with Vuex Actions

3:03

Creating the Album Component

4:14

Fetching Photos

4:59

Adding Routing

3:10

Improved Routing

3:42

Using router-link

2:20

Watching for Route Changes

4:41

Caching Results for a Faster App

4:53

Parting Words and Recommendations

3:16