The Vue.js 3 Masterclass

17h 7m 33s
English
Paid
March 23, 2024

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.

More

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 The Vue.js 3 Masterclass

Join premium to watch
Go to premium
# Title Duration
1 What Do I Need to Take the Vue 3 Masterclass? 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

Similar courses to The Vue.js 3 Masterclass

Using Vue 2 to Create Beautiful SEO-Ready Websites
Course: Large Scale Apps with Vue, Vite and TypeScript
Full Stack Isomorphic JavaScript with Vue.js & Node.js
Master Laravel, Vue 3 & Inertia Full Stack 2023

Master Laravel, Vue 3 & Inertia Full Stack 2023udemy

Duration 35 hours 53 minutes 40 seconds
Material UI with Vuetify and Vue.js

Material UI with Vuetify and Vue.jsvueschool.io

Duration 1 hour 40 minutes 10 seconds
Vue 3, Nuxt.js and Laravel: A Practical Guide

Vue 3, Nuxt.js and Laravel: A Practical Guideudemy

Duration 10 hours 17 minutes 9 seconds
Vue 3 and Nuxt.js: Different Ways of Creating Vue Apps