🗂 Source code for The Vue 3 Masterclass

  • By VueSchool.io
  • Last update: Dec 31, 2022
  • Comments: 5

The Vue 3 Masterclass

This repository contains the source code for the supercharged, remastered 2021 Vue.js 3 Masterclass course.

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
  • SEO and pre-rendering
  • Deployments

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

Intrigued? Enroll now

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.




  • 1

    Strange behavior of the VueSchool.io

    Hello! You, Vue School, provide the functionality of subscriptions to your courses and link a bank card to payment methods, but you do not give the functionality of unsubscribing from courses and deleting a bank card from my personal account on your site. Or you have deliberately hidden this functionality so that it is difficult to find it on your site. This looks like a scam, because you are trying to charge money from my card and do not respond to an email about how to unsubscribe from subscriptions to your courses. How do I unsubscribe from your courses? How can I stop your attempts to debit money from my bank card? How do I delete a bank card from my personal account on your website?

  • 2

    API Key Expired

    When I run the app locally and try to Register I get an error in Dev Tools console: message: "{\"error\":{\"code\":400,\"message\":\"API key expired. Please renew the API key.\",\"errors\":[{\"message\":\"API key expired. Please renew the API key.\",\"domain\":\"global\",\"reason\":\"badRequest\"}],\"status\":\"INVALID_ARGUMENT\",\"details\":[{\"@type\":\"type.googleapis.com/google.rpc.ErrorInfo\",\"reason\":\"API_KEY_INVALID\",\"domain\":\"googleapis.com\",\"metadata\":{\"service\":\"identitytoolkit.googleapis.com\"}}]}}" Do I need to make any changes on my side? Thanks!

  • 3

    Source code portions relying on firebase doesn't work with firebase v9

    The whole Firebase series in the videos is not working (as of December 2021). That’s because the install instructions provided in these Vue School videos (“npm install —save firebase”) now installs version 9 of Firebase. Version 9 (I have discovered after grinding through research the past several hours), now installs what is named “Modular SDK”. That version uses different terminology than previous versions, so nothing with firebase as described in these Vue School videos works with version 9 installed.

    For instance, writing “import firebase from ‘firebase’ and “firebase.initializeApp” in main.js DOES NOT WORK with version 9. Instead, you have to type “import { initializeApp } from 'firebase/app'” and “initializeApp(firebaseConfig).

    Likewise, the video (and source code) instructions for ThreadShow in this video returns an error because you can’t use “import firebase from ‘firebase’” in the script tag. I haven’t figured out what you do instead.

    To code along with the videos, you need to install firebase v 8. After 3 hours of research, I haven’t figured out how to install version 8 (Google’s site is devoid of info on this). I’m guessing it’s something like npm i firebase@8 or something like that.

    This is defcon 1 stuff that Vue School needs to fix right away. The series comes to a screeching halt otherwise

  • 4

    Catching possible erros inside /thread routes (404)

    I just add this after the last router path { path: '/thread/:id/:pathMatch(.)', name: 'NotFound', component: PageNotFound } //

    It will catch all wrong routes inside /thread and redirect to the Not Found page

  • 5


    Hi there,

    Thanks for the amazing detailed course. Just wanted to understand the licensing of this final repo - MIT?

    Are you able to update the licensing details? Thanks bunch!