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
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
100% Money Back within 30 days, if you don't like the course.
Guarantee applies for full purchases only.
- → Instant access to The Master Class
- → Stream or download lessons
- → Join our exclusive Slack channel
- → English subtitles on all lessons
- → Invoice available after purchase
Access all our courses for $25/mo or $180/year.
Full purchase gives you lifetime access. Future modules, lessons and updates are included!
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.
1. 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
2. Application Structure
1. Structuring our data
2. Import data source and show the conversations
3. Vue.js with a Theme and Scoped CSS Styling
3. 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
4. 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
5. Forum Logic
1. Organize threads in forums
2. Forum Components
3. Categories, Collections of Forums
4. Base Components
5. Global Base Components
6. 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
7. 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
8. 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?
9. 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
10. 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
11. 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
12. 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
13. 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
14. 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
15. Modularise Vuex Store
1. Split a Large Vuex Store Into Namespaced Modules
2. Split a Large Vuex Store Into Namespaced Modules Part 2
16. 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
17. 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 member and author from Greece who prefers his coffee iced. Passionate about quality code and best practices.
Rolf Haug
Rolf has been responsible for multiple successful projects in the private sector. He's addicted to knowledge and artisan food.