The Vue.js 3 Masterclass

17h 7m 33s
English
Paid

Course description

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.

Read more about the course

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

Watch Online

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

Watch Online The Vue.js 3 Masterclass

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)

Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)

Sources: udemy
Learn to build Shopify themes using Liquid, JavaScript, and Vue.js v3.0 from scratch. No experience required! Who is the course for? Anyone who is looking to b
6 hours 37 minutes 49 seconds
Vue 3, Nuxt.js and NestJS: A Rapid Guide - Advanced

Vue 3, Nuxt.js and NestJS: A Rapid Guide - Advanced

Sources: udemy
Learn how to create an Ambassador App using Vue 3, NuxtJS and NestJS. We will build 3 frontend apps Admin, Ambassador and Checkout and they will consume a big N
7 hours 37 minutes 36 seconds
Generating Fake Data with Faker.js

Generating Fake Data with Faker.js

Sources: vueschool.io
Every user application depends on data, whether it's user profiles, product listings, or blog posts. However, creating realistic datasets...
51 minutes 56 seconds
Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)

Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)

Sources: zerotomastery.io
The only Vue.js tutorial + projects course you need to learn Vue (including all new Vue 3 features), build large-scale Vue applications from scratch & get hired as a Vue develop...
27 hours 56 minutes 34 seconds