Learn Vue JS course Learn Javascript and Vue JS Learn VueJS course Learn VueJS Tutorial

The Vue.js 2 Master Class

In our Master Class you'll learn Vue.js 2 by building a real-world application. Together we’ll create a complete forum from scratch using exciting technologies that synergize with Vue.

Vue 2

Last update date 14/10/21

🚧 NOTICE: You are watching a Vue.js 2 course
🚧 PLEASE NOTE: This masterclass is built with the Options API
vuejs-masterclass

The Composition API Masterclass is out!

  • Intermediate
Illustration image of The Vue.js 2 Master Class

About the The Vue.js 2 Master Class course

This course is our signature course. It is probably the most thorough Vue.js 2 course available online.

The Vue.js 2 Master Class is so comprehensive that we cannot cover everything on this page. Thus we’ve created a separate page where you can learn more about it.

In our Master Class you'll learn Vue.js by building a real-world application. Together we’ll create a complete forum from scratch using exciting technologies that synergize with Vue.

The goal of the Master Class is to teach you Vue.js along with Best Practices, Modern Javascript, and other exciting technologies, by building a Real World application - a forum.

We cover the fundamentals, like:

  • Vue cli, router and State management with Vuex
  • Modern Javascript (ES6/7/8)
  • User permissions & protected routes
  • Third party authentication
  • Firebase Realtime Database & Cloud functions
  • Automatic code review with ESLint
  • Deployment
  • Application architecture and best practices

We also dive into harder topics, like:

  • Higher Order Functions
  • Creating Vue Plugins
  • Code Splitting
  • Support for older Browsers
  • Webpack configuration
  • SEO and pre-rendering
  • Reactive programming with RxJS

By completing the Vue.js Master Class, you will be able to land any Vue related job or optimize/improve your own projects!

1

Getting Started

5 lessons • 19 min
What do I need?
1:44
Get started with the mighty Vue CLI
3:11
Scaffold your project with Vue CLI
3:55
Explore the Webpack template
3:34
Automatic Code Review, Linting with ESLint
7:05
2

Application Structure

3 lessons • 20 min
Structuring our data
6:25
Import data source and show the conversations
3:57
Vue.js with a Theme and Scoped CSS Styling
9:53
3

Routing

6 lessons • 31 min
Introducing the vue-router
6:42
Components, Props and Computed Properties
11:31
Router Links
2:32
Organizing the Components
4:12
Handling not found pages
2:28
CSS Modules with Webpack
4:30
4

Organizing the Application

6 lessons • 36 min
Tidy up a messy component
5:55
Arrow Functions
2:11
Let the discussion begin!
10:48
Communicate between components
6:03
Destructuring JavaScript Arrays and Objects
5:34
Human Friendly Dates
5:53
5

Forum Logic

5 lessons • 28 min
Base Components
4:25
Global Base Components
5:54
Organize threads in forums
5:43
Forum Components
5:11
Categories, Collections of Forums
7:28
6

Vuex State Management

10 lessons • 40 min
Migrating to Vuex
5:27
Creating Posts using Vuex
5:37
The NavBar
2:39
Grabbing the Authenticated User
2:14
User Profile Page
5:24
Utility to Count Object Properties
3:31
JavaScript: By Reference vs By Value
3:22
Update a User Profile
6:43
Shared Page Components
3:00
Use authId when Creating Posts
2:25
7

Forum Threads

8 lessons • 27 min
Create New Threads
2:22
Actions and Mutations
7:37
Add the Route
2:29
Redirect on Publish
2:10
Use Route Params
1:35
ThreadEditor
2:32
Edit Threads
5:08
Improve the ThreadEditor
3:38
8

Forum Posts

5 lessons • 16 min
Editing Posts
7:30
Conditionally display multiple elements with an invisible wrapper
1:33
Post Editor Buttons
1:12
Vue.js Custom Prop Validation FREE
3:08
Has the post been modified?
3:12
9

Higher Order Functions

5 lessons • 20 min
What is a Higher Order Function? FREE
4:33
Creating Dynamic Vuex Getters using Higher Order Functions
5:17
Create Vuex Mutations with Higher Order Functions
4:56
Filter Array Elements to Count Unique Contributors
4:50
Small Improvements Before the Firebase Chapter
1:18
10

Firebase Real-Time Database

17 lessons • 57 min
Install Firebase Realtime Database
2:48
Set up the Firebase Realtime Database
1:12
Understanding the Vue.js Lifecycle Hooks FREE
4:22
Start Migrate Vuex to use Firebase Realtime Database
7:06
Fetch Data from Firebase With Vuex Actions
3:40
Reusable Vuex Actions and Mutations
3:51
Vuex Actions that Fetches Multiple Items from Firebase
3:19
Fetch Firebase Data Before Creating Component Instance
3:48
Fetch Data for All Pages
5:12
Clean up Components by Mapping our Vuex Actions
3:29
Split Vuex Store into Multiple Files
2:40
Fetch Data Before Creating the Vue Instance
2:13
Store New Posts in Firebase with Vuex
3:58
Store New Threads in Firebase with Vuex
4:31
Counting Thread Contributors
1:49
Updating posts in Firebase Realtime Database
1:41
Update threads in Firebase Realtime Database
1:52
11

Loading Indicators when Fetching Async Data

5 lessons • 17 min
Hide Content Until Data is Fully Loaded
2:01
Share Logic Between Components with Mixins
5:26
Display a Loading Indicator while Components Fetch Async Data
6:10
Show a Cool Loading Spinner While Components Fetch Data
1:22
Show a Progress Bar while Components Fetch Asynchronous Data
2:35
12

Workflow Improvements

4 lessons • 13 min
The Firebase Tools (CLI)
2:54
Create Custom NPM script To Seed Database
2:25
Using Environment Variables in the Vue.js Webpack Template
3:28
Using .env file in the Vue.js Webpack Template
4:42
13

User Authentication

7 lessons • 27 min
Create the Registration Form
2:20
Store new Users in the Database
3:08
Implement Firebase Authentication
4:17
Sign Users in When they Register
3:20
Sign Users In and Out
5:17
Dropdown Menus using Class Bindings
3:31
Authenticate Users via 3rd Party Providers
5:40
14

Vue Router Middlewares and Navigation Guards

9 lessons • 34 min
In Component Navigation Guards FREE
7:04
Componentless Routes with Navigation Guards FREE
2:54
Global Navigation Guards and Meta Fields FREE
4:58
Firebase Authentication and Navigation Guards
5:43
Protecting Pages from Authenticated Users
2:17
Redirect Users After Logging In to the Page they Tried to Visit
2:48
Only Allow Authenticated Users to Create and Edit Posts
1:30
Profile Page of Authenticated User
2:17
Force Vue Router to Destroy Component to Trigger Lifecycle Hooks
5:14
15

Modularise Vuex Store

2 lessons • 21 min
Split a Large Vuex Store Into Namespaced Modules
13:24
Split a Large Vuex Store Into Namespaced Modules Part 2
8:17
16

Form Validation

5 lessons • 13 min
Install Vuelidate and Validate the Registration Form
4:18
Validate Unique Fields Asynchronously with Firebase
3:48
Validate that an Input is An Image URL that Exists
2:45
Extract Custom Vuelidate Validators to a Utility
1:52
Homework: Validate All Forms
1:02
17

Custom Vue.js Directives

3 lessons • 5 min
Close Dropdown on Click Outside
1:27
Mobile Navbar
2:13
Close Mobile Navbar on Scroll
2:11