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

The Vue.js Master Class

Learn Vue.js by building a real-world application from scratch with Alex Kyriakidis, Vue.js core-team member and author of the bestselling book The Majesty of Vue.js

Watch Sample

While there are many great vue.js courses, most are targeted to beginners or cover only the fundamental concepts of the topic.

I devoted myself to create the most comprehensive Vue course, where we build together a real-world application, which scales, is optimized for performance and SEO, and covers lots of essential topics for building a modern web application.

I honestly believe that The Vue.js Master Class is the most thorough course out there.

Alex Kyriakidis
Vue.js core member, co-founder Vue School

What you'll learn

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!

Already convinced? Buy now

Evan You Creator of Vue.js

Thanks to fine people like you, Vue School can proudly sponsor Evan and the future of Vue.js by being a Platinum Patreon.

Even if you've read through every word of the Vue docs, there's no substitute for real experience building an app, making decisions, weighing pros and cons, and refactoring as requirements change. Courses like this give you a head start, helping you avoid some of the most common mistakes!

Chris Fritz
Author of the Vue.js Docs

What's included?

In The Vue.js Master Class, we use modern technologies that synergize with Vue.

Vue & Ecosystem

Vue Router, vue-cli, vue-devtools, Vuex, and more

Modern JavaScript

Best practices with modern JavaScript covering ES6, ES7, and ES8

Firebase Suite

Realtime Database, Cloud Functions, Cloud Storage, Authentication, and more

Reactive Programming

Reactive programming with RxJS using observables

Webpack

Module bundling, performance optimization, and code splitting with Webpack

SEO & Browser Support

SEO Friendly with meta tags, using pre-rendering. Rich browser support (inc. IE8)

The course is still in production. We publish new lessons every week!

Get The Vue.js Master Class

Learn everything you need to know about Vue.js in one thorough Master Class

  • → Instant access to The Master Class
  • → Stream or download lessons
  • → Join our exclusive Slack channel
  • → English subtitles on all lessons
  • → Invoice available after purchase
Subscribe | $25/mo

Access all our courses for $25/mo or $180/year.

Full purchase gives you lifetime access. Future modules, lessons and updates are included!

Buying for your team?

100% Money Back within 30 days, if you don't like the course. Guarantee applies for full purchases only.

The Vue.js Master Class is still in production and the price increases as more lessons become available. We expect to have 150 - 200 lessons and more than 10 hours of professionally trimmed content. Get the course today and save a bunch on our Early Access Offer.

Course Outline

During the course, we will build a complete forum together. The forum is a Single Page Application and has features like moderation, real-time updates as users interact with each other, markdown support, meta tags, and many many more.

  • Create threads and posts, including Markdown support
  • Organise threads into forums, and forums into categories
  • Update application in real time when users create or update threads/posts/etc
  • Develop a moderation system to manage users content, categorize forums, and more
  • Authenticate users with email/password or 3rd parties, like GitHub, Twitter, Google, etc
  • Pre-render the application for Search Engine Optimisation, meta tags, and add support for older browsers
  • Fun features like quoting, post reactions, and more

The Vue.js Master Class is huge, but it’s probably the most thorough Vue.js course available!

Course Content

The Vue.js Master Class is still in production, we release new lessons every week.
The course consists of modules and lessons.

Modules

Modules are topic focused courses that will make sure you know what you need to know before we use the techniques, technologies, libraries etc., in the forum we're building.

Lessons

The lessons are organized as short, focused and on-point lessons in chapters.

Getting Started

1. What do I need?

2. Get started with the mighty Vue CLI

3. Scaffold your project with Vue CLI

4. Automatic Code Review, Linting with ESLint

5. Explore the Webpack template

Application Structure

1. Structuring our data

2. Import data source and show the conversations

3. Vue.js with a Theme and Scoped CSS Styling

Routing

1. Introducing the vue-router

2. Components, Props and Computed Properties

3. Router Links

4. Organizing the Components

5. Handling not found pages

6. CSS Modules with Webpack

Organizing the Application

1. Tidy up a messy component

2. Arrow Functions

3. Let the discussion begin!

4. Communicate between components

5. Destructuring JavaScript Arrays and Objects

6. Human Friendly Dates

Forum Logic

1. Organize threads in forums

2. Forum Components

3. Categories, Collections of Forums

4. Base Components

5. Global Base Components

Vuex State Management

1. Migrating to Vuex

2. Creating Posts using Vuex

3. The NavBar

4. Grabbing the Authenticated User

5. User Profile Page

6. Utility to Count Object Properties

7. JavaScript: By Reference vs By Value

8. Update a User Profile

9. Shared Page Components

10. Use authId when Creating Posts

Forum Threads

1. Create New Threads

2. Actions and Mutations

3. Add the Route

4. Redirect on Publish

5. Use Route Params

6. ThreadEditor

7. Edit Threads

8. Improve the ThreadEditor

Forum Posts

1. Editing Posts

2. Conditionally display multiple elements with an invisible wrapper

3. Post Editor Buttons

4. Vue.js Custom Prop Validation

5. Has the post been modified?

Higher Order Functions

1. What is a Higher Order Function?

2. Creating Dynamic Vuex Getters using Higher Order Functions

3. Create Vuex Mutations with Higher Order Functions

4. Filter Array Elements to Count Unique Contributors

5. Small Improvements Before the Firebase Chapter

Firebase Real-Time Database

1. Install Firebase Realtime Database

2. Set up the Firebase Realtime Database

3. Understanding the Vue.js Lifecycle Hooks

4. Start Migrate Vuex to use Firebase Realtime Database

5. Fetch Data from Firebase With Vuex Actions

6. Reusable Vuex Actions and Mutations

7. Vuex Actions that Fetches Multiple Items from Firebase

8. Fetch Firebase Data Before Creating Component Instance

9. Fetch Data for All Pages

10. Clean up Components by Mapping our Vuex Actions

11. Split Vuex Store into Multiple Files

12. Fetch Data Before Creating the Vue Instance

13. Store New Posts in Firebase with Vuex

14. Store New Threads in Firebase with Vuex

15. Counting Thread Contributors

16. Updating posts in Firebase Realtime Database

17. Update threads in Firebase Realtime Database

Loading Indicators when Fetching Async Data

1. Hide Content Until Data is Fully Loaded

2. Share Logic Between Components with Mixins

3. Display a Loading Indicator while Components Fetch Async Data

4. Show a Cool Loading Spinner While Components Fetch Data

5. Show a Progress Bar while Components Fetch Asynchronous Data

Workflow Improvements

1. The Firebase Tools (CLI)

2. Create Custom NPM script To Seed Database

3. Using Environment Variables in the Vue.js Webpack Template

4. Using .env file in the Vue.js Webpack Template

User Authentication

1. Create the Registration Form

2. Store new Users in the Database

3. Implement Firebase Authentication

4. Sign Users in When they Register

5. Sign Users In and Out

6. Dropdown Menus using Class Bindings

7. Authenticate Users via 3rd Party Providers

Vue Router Middlewares and Navigation Guards

1. In Component Navigation Guards

2. Componentless Routes with Navigation Guards

3. Global Navigation Guards and Meta Fields

4. Firebase Authentication and Navigation Guards

5. Protecting Pages from Authenticated Users

6. Redirect Users After Logging In to the Page they Tried to Visit

7. Only Allow Authenticated Users to Create and Edit Posts

8. Profile Page of Authenticated User

9. Force Vue Router to Destroy Component to Trigger Lifecycle Hooks

Modularise Vuex Store

1. Split a Large Vuex Store Into Namespaced Modules

2. Split a Large Vuex Store Into Namespaced Modules Part 2

Form Validation

1. Install Vuelidate and Validate the Registration Form

2. Validate Unique Fields Asynchronously with Firebase

3. Validate that an Input is An Image URL that Exists

4. Extract Custom Vuelidate Validators to a Utility

5. Homework: Validate All Forms

Custom Vue.js Directives

1. Close Dropdown on Click Outside

2. Mobile Navbar

3. Close Mobile Navbar on Scroll

Who's behind Vue School?

Vue School was founded in 2016. Alex Kyriakidis, Rolf Haug, and their partners, strive to deliver the very best online resources to learn Vue.js.

Alex Kyriakidis, Vue.js Core Team Member & Co-Founder of Vue School

Alex Kyriakidis

Vue.js core member and author from Greece who prefers his coffee iced. Passionate about quality code and best practices.

Rolf Haug, Co-Founder of Vue School

Rolf Haug

Rolf has been responsible for multiple successful projects in the private sector. He's addicted to knowledge and artisan food.