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

Vue.js 3 Options API Masterclass

Learn how to build a real-world application with Vue.js 3 in the supercharged and remastered Vue.js Masterclass.

🚧 PLEASE NOTE: This masterclass is built with the Options API
vuejs-masterclass

The Composition API Masterclass is out!

  • 157 lessons
  • 17 hrs
  • Intermediate
Illustration image of Vue.js 3 Options API Masterclass

About the Vue.js 3 Options API Masterclass course

This is the supercharged, remastered Vue.js 3 Masterclass.

We’ve taken all the feedback we got from The Vue.js 2 Masterclass, and supercharged The Vue.js Masterclass with all the new goodies from Vue.js 3 and the ecosystem.

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

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

In our Masterclass 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 Masterclass 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 & Route Guards
  • Third party authentication
  • Google Cloud Firestore
  • Automatic code review with ESLint
  • Consuming REST API
  • 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
  • Deployments

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

Requirements You should be familiar with JavaScript, basic ES6 like arrow functions and import statements, and have fundamental knowledge of Vue.js.

If you are just starting out with Vue.js, we suggest that you watch our free course Vue.js Fundamentals and browse around our other beginner courses before diving into the Vue Masterclass. If you are looking to brush up your ES6 skills, watch our course Modern JavaScript: ES6 and beyond.

1

Getting Started

10 lessons • 50 min
What Do I Need to Take the Vue 3 Masterclass? FREE
2:39
🔮 FTF - Hello from the Future
4:30
🔮FTF - From Vue CLI to Vite
1:48
Install Vue CLI and Its Dependencies
5:21
Scaffold a New Vue 3 Project With Vue CLI
2:47
Exploring the Scaffolded Vue 3 Project
4:32
🔮 FTF - Bootstrap the Project with Vite
8:01
Automatic and Static Code Review With ESLint (Linting)
9:25
Choosing ESLint Presets
6:19
Initialize a Vue 3 App Using createApp
5:30
2

Application Structure

7 lessons • 49 min
Structuring Our Forum Data
8:35
How to Import Data From JSON Files in a Vue 3 App
3:26
🔮 FTF - From Options to CAPI
5:08
Displaying a List of Elements in Vue 3
12:27
🔮 FTF - Refactor the HomePage Component Using the Composition API
9:46
Styling Vue Components
5:58
Global Styles and Stylesheet Processing
4:31
3

Routing & Components Basics

8 lessons • 48 min
Install and Configure Vue Router 4
7:15
Dynamic Route Matching & Route Params
6:00
Extract Router Configuration
2:09
Create ThreadList.vue and Clean up the Homepage
8:43
🔮 FTF - Refactor the ThreadList Component with the Composition API
5:01
Using router-link to Navigate Between Page Components
4:07
Creating a Not Found Page with Vue Router
4:50
Redirect With Vue Router Without Changing the URL
10:28
4

Organizing the Application

10 lessons • 1 hr
Reorganizing the Page Components
4:52
Creating a Forum Post Component
6:18
Creating a Post Editor
11:03
Communication Between Components
8:26
Adding Human Readable Dates
7:13
Creating Base Components in a Vue Application
6:09
Registering Base Components Globally
5:48
Organizing Threads in Forums
6:30
Creating a ForumList Component
8:42
Introducing Categories, Collections of Forums
12:37
5

Vuex and State Management

14 lessons • 1 hr
🔮 FTF - From Vuex to Pinia
4:51
How to Migrate Vue Application’s State to Vuex
10:23
Vuex Actions & Mutations
6:33
🔮 FTF - Setup Initial State in Pinia
12:20
🔮 FTF - Use Pinia Actions for Adding Posts
9:40
Creating a Forum Navbar
4:05
Fetching the Authenticated User From Vuex
3:34
Creating the User Profile Page
7:18
JavaScript: Passed by Reference vs by Value
4:24
Extracting User Posts and Threads to the Store
6:24
Updating the User Profile
7:34
Sharing Components Between Multiple Pages
4:41
Scroll to Top with Vue Router
2:27
Using the authId When Creating new posts
2:22
6

Forum Threads

9 lessons • 56 min
Creating New Forum Threads
3:34
Refactoring the Forum Thread Related Actions and Mutations
7:39
Creating a Route to Create New Forum Threads
4:29
Redirecting When Creating New Threads
3:44
Creating a ThreadEditor Component
3:53
Editing Threads
10:49
Improving the ThreadEditor
3:26
🔮 FTF - Refactor the Thread Editor Component with the Composition API
9:34
Creating Helper Functions
9:13
7

Higher Order Functions

4 lessons • 33 min
What Is a Higher Order Function in JavaScript?
6:59
Creating Vuex Mutations with Higher Order Functions
9:52
Creating Dynamic Vuex Getters with Higher Order Functions
10:27
Minor Improvements Before Introducing the Cloud Firestore
5:57
8

Working with Cloud Firestore

23 lessons • 2 hrs
🔮 FTF - From Firebase 8 - 9
2:24
Firebase Setup and Installation
6:41
Set up the Cloud Firestore Database
5:56
Understanding the Lifecycle Hooks in Vue.js
6:33
Migrating Vuex to use Cloud Firestore Database
11:04
Fetching Data from Cloud Firestore with Vuex Actions
5:35
Creating Reusable Vuex Actions and Mutations
8:52
Creating Vuex Actions that Fetch Multiple Items from Cloud Firestore
7:48
Fetching Data in beforeCreate on the Homepage
8:32
Fetching Data for the Forum Page
5:59
Fetching Data For All Remaining Pages
12:51
Mapping Vuex Actions
7:31
Splitting the Vuex Store into Multiple Files
6:38
Fetching App-Wide Data
3:59
Storing New Posts in Cloud Firestore with Vuex
9:41
Using the Server Timestamp for Post Published At
6:12
Storing New Threads in Cloud Firestore with Vuex
5:03
Incrementing the User's Posts Count
8:01
Updating a Thread in the Firestore
6:34
Creating a Font Awesome Plugin in Vue 3
9:50
Preparing the User Interface for Post Updates
8:29
Updating a Post in Cloud Firestore
5:52
Unsubscribing from Cloud Firestore Snapshots
14:04
9

Loading Indicators when Fetching Async Data

5 lessons • 27 min
Hiding Content Until Data is Fully Loaded
2:40
Sharing Logic Between Components with Mixins
8:43
Displaying a Loading Indicator while Components Fetch Async Data
9:23
Show a Loading Spinner while Fetching Async Data
2:11
Showing a Progress Bar while Components Fetch Asynchronous Data
4:17
10

Workflow Improvements

4 lessons • 24 min
Firebase Tools (CLI)
6:01
Seeding the Database
6:24
Using .env for Different Environment Configuration
6:53
Using .env for Secure Secrets
5:12
11

User Authentication

8 lessons • 51 min
Creating the User Registration Form
4:24
Storing New Users in the Firestore
6:06
Integrating Registration with Firebase Authentication
7:01
Signing the User in after Registration
5:44
Signing Users In and Out
7:45
Using Class Bindings for User Drop Down Menu
5:02
Authenticating Users via 3rd Party Providers
6:01
Unsubscribing from the Auth User Snapshot
9:09
12

Vue Router Middleware and Navigation Guards

11 lessons • 1 hr
In Component Navigation Guards with Vue Router
11:50
Navigation Guards for Componentless Routes
4:46
Meta Fields and Global Navigation Guards
6:20
Navigation Guards and Firebase Authentication
7:50
404 Thread Show Page and Async Thread Data
3:28
Firestore Rules and Protecting Pages for Authenticated Users
13:59
Hiding Guest Pages from Logged In Users
2:48
Redirecting Users After Logging In to the Page they Tried to Visit
4:26
Allowing Only Authenticated Users to Create and Edit Posts
2:52
The Authenticated User's Profile Page
5:36
Forcing Vue Router to Destroy Component to Trigger Lifecycle Hooks
6:03
13

Modularizing the Vuex Store

3 lessons • 37 min
Splitting a Large Vuex Store Into Namespaced Modules Part 1
10:58
Splitting a Large Vuex Store Into Namespaced Modules Part 2
12:27
Splitting a Large Vuex Store Into Namespaced Modules Part 3
14:29
14

Custom Vue.js Directives

3 lessons • 17 min
Closing Dropdown on Click Outside
6:53
Building a Mobile Navbar
4:31
Closing the Mobile Navbar on Scroll
6:06
15

Pagination

4 lessons • 35 min
Pagination and Indexes in the Cloud Firestore
10:03
Paginating User Posts with Infinite Scroll
5:37
Paginating Threads with Pagination Component
17:11
Storing the Current Page as a URL Query Variable
3:07
16

Notification System

6 lessons • 34 min
Clean Up to Prep for Notifications
5:41
A Composable for Storing and Interacting with Notifications
10:48
Implementing Notifications on Thread Page Part 1
9:15
Implementing the Notifications on Thread Page Part 2
3:39
Extending Notifications with Options
3:04
Using the Transition Group Component
1:50
17

Uploading and Storing Images

8 lessons • 45 min
Uploading Avatars to Firebase Storage During Registration
8:07
Securing Files with Firebase Storage Rules
1:57
Editing the User Avatar on the Profile Page
5:17
Improving the Avatar Editing User Experience
6:53
Handling Errors With Image Uploads
4:58
Providing an Avatar Placeholder for Users with no Avatar
4:38
Use the Pixabay REST API to Enable Random Profile Pictures
9:52
Storing Images to Firebase Storage from a Web URL
3:30
18

Form Validation with VeeValidate

10 lessons • 48 min
Introduction to VeeValidate
4:43
Displaying Error Messages with VeeValidate
3:18
Defining Global Components and Rules
6:05
Using Multiple Rules on a Single Field
1:48
Passing Arguments to VeeValidate Rules
2:07
Customizing VeeValidate Error Messages
4:54
Defining Async Rules with VeeValidate
6:24
Wrapping VeeValidate Field with Custom AppFormField
6:00
Adding Validation to all the Forms
6:04
Creating a Simple Autocomplete Location Field
6:55
19

Deploying the Application

10 lessons • 56 min
Last Minute Clean Up Part 1
5:43
Last Minute Clean Up Part 2
6:42
Last Minute Clean Up Part 3
4:53
Updating the User Email Address
10:07
Updating the User Email Address Part 2
5:05
Deploying to Netlify
3:44
CI/CD with Netlify
3:06
Analyzing Bundle Size and Code Splitting Routes
8:03
Meta for SEO with Netlify PreRendering
8:34
Course Conclusion
0:49