CF

The Vue.js 3 Masterclass

17h 7m 33s
English
Paid

Learn Vue.js 3 by building a real app. In this Masterclass, you create a full forum from scratch. You work step by step, use clear patterns, and build skills that you can use on real projects.

You cover core Vue ideas, modern JavaScript, and the tools that support a full frontend app. The course page cannot show it all, so we keep this overview short and direct.

What You Learn

You start with the basics. You build small parts first. Then you join them to form a full app. Each topic builds on the last so you can follow with ease.

Core Topics

  • Vue CLI, Vue Router, and state with Vuex
  • Modern JavaScript (ES6, ES7, ES8)
  • User permissions and route guards
  • Third‑party auth
  • Google Cloud Firestore
  • Code checks with ESLint
  • Using REST APIs
  • App structure and best practices

Advanced Topics

  • Higher‑order functions
  • Vue plugins
  • Code splitting
  • Support for older browsers
  • Webpack setup
  • SEO and pre‑rendering
  • Deployments

How You Learn

You write code from the first lesson. You solve small problems, then move to larger ones. You see how each choice affects the full app.

By the end, you understand how to build and ship a Vue app that works in the real world.

Additional

https://github.com/vueschool/vue-masterclass

About the Author: Vue School

Vue School thumbnail

Vue School (vueschool.io) is a Greece-based Vue.js training platform founded by Alex Kyriakidis, an early Vue community member and one of the longest-running independent Vue educators. Vue School operates as both an on-demand course platform and a Vue / Nuxt consulting business, with course material that often emerges from real client engagements.

Course material covers the full Vue ecosystem: Vue 3 fundamentals through advanced Composition API patterns, Nuxt 3 production deployment, Pinia state management, Vue Router, the testing track with Vitest, TypeScript with Vue, real-time features with Pusher / WebSockets, and the broader full-stack Vue work. Vue School also publishes the popular Mastering Pinia course in collaboration with Pinia's author Eduardo San Martín Morote.

The CourseFlix listing under this source carries over 30 Vue School courses spanning that range. Material is paid; Vue School runs on per-course or membership pricing on the original platform. Courses are aimed at Vue developers from beginner through senior level building production Vue applications.

Watch Online 157 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 157 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: What Do I Need to Take the Vue 3 Masterclass?
All Course Lessons (157)
#Lesson TitleDurationAccess
1
What Do I Need to Take the Vue 3 Masterclass? Demo
02:40
2
FTF - Hello from the Future
04:31
3
FTF - From Vue CLI to Vite
01:49
4
Install Vue CLI and Its Dependencies
05:21
5
Scaffold a New Vue 3 Project With Vue CLI
02:47
6
Exploring the Scaffolded Vue 3 Project
04:32
7
FTF - Bootstrap the Project with Vite
08:02
8
Automatic and Static Code Review With ESLint (Linting)
09:26
9
Choosing ESLint Presets
06:20
10
Initialize a Vue 3 App Using createApp
05:31
11
Structuring Our Forum Data
08:36
12
How to Import Data From JSON Files in a Vue 3 App
03:27
13
FTF - From Options to CAPI
05:09
14
Displaying a List of Elements in Vue 3
12:28
15
FTF - Refactor the HomePage Component Using the Composition API
09:47
16
Styling Vue Components
05:59
17
Global Styles and Stylesheet Processing
04:31
18
Install and Configure Vue Router 4
07:16
19
Dynamic Route Matching & Route Params
06:01
20
Extract Router Configuration
02:10
21
Create ThreadList.vue and Clean up the Homepage
08:43
22
FTF - Refactor the ThreadList Component with the Composition API
05:02
23
Using router-link to Navigate Between Page Components
04:07
24
Creating a Not Found Page with Vue Router
04:50
25
Redirect With Vue Router Without Changing the URL
10:28
26
Reorganizing the Page Components
04:53
27
Creating a Forum Post Component
06:19
28
Creating a Post Editor
11:04
29
Communication Between Components
08:26
30
Adding Human Readable Dates
07:14
31
Creating Base Components in a Vue Application
06:09
32
Registering Base Components Globally
05:49
33
Organizing Threads in Forums
06:31
34
Creating a ForumList Component
08:43
35
Introducing Categories, Collections of Forums
12:38
36
FTF - From Vuex to Pinia
04:52
37
How to Migrate Vue Application’s State to Vuex
10:24
38
Vuex Actions & Mutations
06:33
39
FTF - Setup Initial State in Pinia
12:21
40
FTF - Use Pinia Actions for Adding Posts
09:41
41
Creating a Forum Navbar
04:05
42
Fetching the Authenticated User From Vuex
03:34
43
Creating the User Profile Page
07:19
44
JavaScript: Passed by Reference vs by Value
04:25
45
Extracting User Posts and Threads to the Store
06:25
46
Updating the User Profile
07:35
47
Sharing Components Between Multiple Pages
04:42
48
Scroll to Top with Vue Router
02:27
49
Using the authId When Creating new posts
02:23
50
Creating New Forum Threads
03:34
51
Refactoring the Forum Thread Related Actions and Mutations
07:40
52
Creating a Route to Create New Forum Threads
04:29
53
Redirecting When Creating New Threads
03:44
54
Creating a ThreadEditor Component
03:54
55
Editing Threads
10:49
56
Improving the ThreadEditor
03:27
57
FTF - Refactor the Thread Editor Component with the Composition API
09:35
58
Creating Helper Functions
09:14
59
What Is a Higher Order Function in JavaScript?
06:59
60
Creating Vuex Mutations with Higher Order Functions
09:53
61
Creating Dynamic Vuex Getters with Higher Order Functions
10:28
62
Minor Improvements Before Introducing the Cloud Firestore
05:57
63
FTF - From Firebase 8 - 9
02:25
64
Firebase Setup and Installation
06:41
65
Set up the Cloud Firestore Database
05:57
66
Understanding the Lifecycle Hooks in Vue.js
06:34
67
Migrating Vuex to use Cloud Firestore Database
11:04
68
Fetching Data from Cloud Firestore with Vuex Actions
05:36
69
Creating Reusable Vuex Actions and Mutations
08:53
70
Creating Vuex Actions that Fetch Multiple Items from Cloud Firestore
07:48
71
Fetching Data in beforeCreate on the Homepage
08:32
72
Fetching Data for the Forum Page
05:59
73
Fetching Data For All Remaining Pages
12:52
74
Mapping Vuex Actions
07:31
75
Splitting the Vuex Store into Multiple Files
06:38
76
Fetching App-Wide Data
04:00
77
Storing New Posts in Cloud Firestore with Vuex
09:42
78
Using the Server Timestamp for Post Published At
06:13
79
Storing New Threads in Cloud Firestore with Vuex
05:03
80
Incrementing the User's Posts Count
08:01
81
Updating a Thread in the Firestore
06:34
82
Creating a Font Awesome Plugin in Vue 3
09:51
83
Preparing the User Interface for Post Updates
08:30
84
Updating a Post in Cloud Firestore
05:52
85
Unsubscribing from Cloud Firestore Snapshots
14:04
86
Hiding Content Until Data is Fully Loaded
02:41
87
Sharing Logic Between Components with Mixins
08:43
88
Displaying a Loading Indicator while Components Fetch Async Data
09:23
89
Show a Loading Spinner while Fetching Async Data
02:11
90
Showing a Progress Bar while Components Fetch Asynchronous Data
04:18
91
Firebase Tools (CLI)
06:02
92
Seeding the Database
06:24
93
Using .env for Different Environment Configuration
06:53
94
Using .env for Secure Secrets
05:12
95
Creating the User Registration Form
04:25
96
Storing New Users in the Firestore
06:06
97
Integrating Registration with Firebase Authentication
07:01
98
Signing the User in after Registration
05:45
99
Signing Users In and Out
07:46
100
Using Class Bindings for User Drop Down Menu
05:02
101
Authenticating Users via 3rd Party Providers
06:02
102
Unsubscribing from the Auth User Snapshot
09:09
103
In Component Navigation Guards with Vue Router
11:51
104
Navigation Guards for Componentless Routes
04:47
105
Meta Fields and Global Navigation Guards
06:20
106
Navigation Guards and Firebase Authentication
07:50
107
404 Thread Show Page and Async Thread Data
03:28
108
Firestore Rules and Protecting Pages for Authenticated Users
13:59
109
Hiding Guest Pages from Logged In Users
02:49
110
Redirecting Users After Logging In to the Page they Tried to Visit
04:26
111
Allowing Only Authenticated Users to Create and Edit Posts
02:53
112
The Authenticated User's Profile Page
05:36
113
Forcing Vue Router to Destroy Component to Trigger Lifecycle Hooks
06:04
114
Splitting a Large Vuex Store Into Namespaced Modules Part 1
10:58
115
Splitting a Large Vuex Store Into Namespaced Modules Part 2
12:28
116
Splitting a Large Vuex Store Into Namespaced Modules Part 3
14:29
117
Closing Dropdown on Click Outside
06:54
118
Building a Mobile Navbar
04:31
119
Closing the Mobile Navbar on Scroll
06:07
120
Pagination and Indexes in the Cloud Firestore
10:04
121
Paginating User Posts with Infinite Scroll
05:37
122
Paginating Threads with Pagination Component
17:11
123
Storing the Current Page as a URL Query Variable
03:07
124
Clean Up to Prep for Notifications
05:41
125
A Composable for Storing and Interacting with Notifications
10:49
126
Implementing Notifications on Thread Page Part 1
09:15
127
Implementing the Notifications on Thread Page Part 2
03:40
128
Extending Notifications with Options
03:04
129
Using the Transition Group Component
01:50
130
Uploading Avatars to Firebase Storage During Registration
08:08
131
Securing Files with Firebase Storage Rules
01:57
132
Editing the User Avatar on the Profile Page
05:17
133
Improving the Avatar Editing User Experience
06:54
134
Handling Errors With Image Uploads
04:58
135
Providing an Avatar Placeholder for Users with no Avatar
04:39
136
Use the Pixabay REST API to Enable Random Profile Pictures
09:53
137
Storing Images to Firebase Storage from a Web URL
03:31
138
Introduction to VeeValidate
04:43
139
Displaying Error Messages with VeeValidate
03:18
140
Defining Global Components and Rules
06:06
141
Using Multiple Rules on a Single Field
01:48
142
Passing Arguments to VeeValidate Rules
02:08
143
Customizing VeeValidate Error Messages
04:55
144
Defining Async Rules with VeeValidate
06:25
145
Wrapping VeeValidate Field with Custom AppFormField
06:01
146
Adding Validation to all the Forms
06:04
147
Creating a Simple Autocomplete Location Field
06:56
148
Last Minute Clean Up Part 1
05:44
149
Last Minute Clean Up Part 2
06:42
150
Last Minute Clean Up Part 3
04:54
151
Updating the User Email Address
10:08
152
Updating the User Email Address Part 2
05:06
153
Deploying to Netlify
03:45
154
CI/CD with Netlify
03:06
155
Analyzing Bundle Size and Code Splitting Routes
08:04
156
Meta for SEO with Netlify PreRendering
08:35
157
Course Conclusion
00:49
Unlock unlimited learning

Get instant access to all 156 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What prerequisites are necessary to enroll in the Vue.js 3 Masterclass?
Students should have a basic understanding of JavaScript as the course covers modern JavaScript features like ES6, ES7, and ES8. Familiarity with web development concepts will be beneficial since the course involves building a full application using Vue.js 3, involving tools like Vue CLI, Vue Router, and state management with Vuex.
What type of project will I build in this course?
Students will build a full-featured forum application from scratch. This involves starting with small components and gradually integrating them into a complete app. The project will cover aspects such as user permissions, route guards, third-party authentication, and REST API integration, providing practical experience with real-world applications.
Who is the target audience for the Vue.js 3 Masterclass?
This course is designed for web developers interested in building applications using Vue.js 3. It is suitable for those who want to deepen their understanding of Vue.js and learn about modern JavaScript, state management, and other tools that support a full frontend app development process.
How does the depth of this course compare to other Vue.js courses?
The course provides an extensive exploration of Vue.js by not only covering the basics but also delving into advanced topics like code splitting, support for older browsers, SEO, and pre-rendering. It includes 157 lessons, ensuring comprehensive coverage from fundamental concepts to advanced deployment strategies.
What tools and platforms are used throughout the course?
The course makes use of several important tools and platforms, including Vue CLI, Vue Router, Vuex, ESLint for code checks, and Google Cloud Firestore for data storage. Students will also learn about deploying applications and supporting older browsers using Webpack and other modern JavaScript techniques.
What topics are not covered in the Vue.js 3 Masterclass?
The course does not cover backend development or server-side programming, as it focuses entirely on frontend development using Vue.js. While it uses Google Cloud Firestore for data storage, it does not delve into server-side database management or backend frameworks.
What is the expected time commitment for completing the course?
The course includes 157 lessons, each building on the previous ones, which suggests a significant time commitment. While a specific runtime isn't provided, students should expect to engage with hands-on coding exercises and problem-solving, which could require several weeks of dedicated study depending on individual pace.