CourseFlix

Vue.js Master Class 2024 Edition

11h 55m 11s
English
Paid

Master Vue.js in 2024 by building a real-world application from scratch! This advanced course by Vue School guides you through the ins and outs of Vue.js, incorporating best practices, modern JavaScript, and impressive technologies, all while developing a fully-functional forum. Learn the essentials such as Vue CLI, Vue Router, Vuex, state management, third-party authentication, REST API consumption, SEO, and much more.

What You'll Learn

Core Vue.js Concepts

  • Installation and Configuration with Vue CLI
  • Efficient Navigation with Vue Router
  • State Management using Vuex

Advanced Integrations

  • Implementing Third-Party Authentication
  • Consuming REST APIs
  • Enhancing Applications with SEO Techniques

Who Should Take This Course?

This course is ideal for:

  • Existing Vue developers aiming to deepen their skills
  • Developers from other programming backgrounds
  • Students interested in modern web development
  • Developer teams seeking uniform knowledge enhancement

Prerequisites

To get the most out of this course, you should be familiar with JavaScript and have a basic understanding of ES6.

Meet Your Instructors

Learn from the best with experienced instructors like Alex Kyriakidis and Daniel Kelly, who bring a wealth of knowledge and hands-on industry experience to guide you throughout the course.

Additional

https://github.com/vueschool/vuejs-masterclass-2024-edition/tree/main

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 127 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Introduction and Project Over-Vue
All Course Lessons (127)
#Lesson TitleDurationAccess
1
Introduction and Project Over-Vue Demo
03:00
2
Learning Environment Intro
03:15
3
Prerequisites and Initial Environment
05:21
4
Scaffolding a Lightning-Fast Vue.js 3 App with Vite
03:31
5
Powering Up VS Code P1: Vue.js 3 Official Extension
05:16
6
Powering Up VS Code P2: Eslint for Vue.js 3
11:09
7
Powering Up VS Code P3: Prettier for Vue.js 3
05:39
8
Git Basics for Every Developer
07:12
9
Navigating the Project Directories and Boilerplate Cleanup
07:36
10
Setting Up Vue Router and Navigation with Router Link
07:31
11
Lazy Load Routes with Vite’s Dynamic Imports in Vue Router
02:18
12
Create Dynamic Routes with Wildcards in Vue Router
04:19
13
Catch All Undefined Routes and Create 404 Not Found Page in Vue Router
05:09
14
Set Up Auto Routes in Vue Router with TypeScript Support
05:58
15
Refactor Vue.js Codebase for File-Based Routing
05:40
16
Supabase: The Perfect Backend for Vue.js Frontend
02:37
17
Integrate Supabase and Connect with Vue.js
06:06
18
Secure Secret App Data with Vite Environment Variables
07:31
19
Use Supabase UI to Create Tables and Rows
05:08
20
Use Supabase SQL Editor to Create Tables and Rows
05:43
21
Use Supabase CLI in Vue.js and Connect to the Remote Project
05:09
22
Create Supabase Database Migration Files in Vue.js
04:43
23
Getting Started with Fakerjs
04:59
24
Set Up Supabase JavaScript Client in Node Environment
05:24
25
Seeding the Supabase Remote Database with Fakerjs
06:05
26
Insert Bulk Entries Into Supabase Database
02:58
27
Query Supabase from Vue.js Script Setup
05:21
28
Use Immediately Invoked Function Expression in Script Setup
03:09
29
Introduction to Vue.js Reactivity System and Using Refs
05:23
30
Provide TypeScript Type Definitions for Refs in Vue.js Script Setup
03:48
31
Add TypeScript Support to Supabase in Vue.js
06:38
32
Create a New Page for Tasks with Database Migration, Seed and Types
07:54
33
Getting Started with Shadcn UI and Vue.js
06:38
34
Prepare the Vue App Layout with TailwindCSS
05:59
35
Utilize Shadcn Input and Dropdown Components
05:51
36
Use Lucide Icons with Iconify and Vue.js
03:50
37
Iconify Icon Web Component in Vue.js
06:19
38
Create a Sidebar and Organize Code with Vue Components
04:54
39
Extract a Reusable Vue Component for Sidebar Links
06:58
40
Configure Vue Router Active Links with TailwindCSS
03:39
41
Create Layout Vue.js Component
04:50
42
Build a Vue.js Data Table Component with Shadcn and TanStack
06:24
43
Customize the Data Table Implementation for Our Vue.js App
06:14
44
Create a Data Table for the Projects Page
04:04
45
Make the Data Table Cells Clickable with RouterLink
06:58
46
Exploring Alternative Ways to Integrate Shadcn and TanStack DataTable
09:17
47
Integrate unplugin-auto-import with Vue and Vite
07:14
48
Configure unplugin-auto-import for unplugin-vue-router
05:07
49
Implement Components Auto Importing Feature in Vue.js 3
06:40
50
Use Vue.js Suspense Component to Handle Async Dependencies
06:24
51
Enhance Vue Router with Suspense for Async Components
06:54
52
Dynamic Page Titles with Pinia
09:11
53
Retrieve Project Details for Tasks: Querying Nested Database Tables
04:13
54
Handle Complex Supabase Queries
06:08
55
Cleaning Time P1: Separating Supabase Queries and Types
05:14
56
Cleaning Time P2: Separating Column Definitions
03:14
57
Fetch the Data for the Individual Project Page
07:15
58
Use the Vue Watch API to Update Pinia Store with the Project Name
03:51
59
Make the Project Page Template Dynamic
05:23
60
Exercise: Create Dynamic Indvidual Task Page
07:05
61
Intro: Why Error Handling Matters for Developers and Users
05:29
62
Create Global Error Handler in Vue.js with Pinia and Vue Router
05:34
63
Adjust the Error Page for Custom Errors
07:44
64
Adjust the Error Page for Supabase Errors
10:09
65
Adjust the Error Page for Native JavaScript Errors
03:27
66
Handle Uncaught JavaScript Errors in Vue.js with onErrorCaptured Hook
04:25
67
Use Props and Vue.js Deep Pseudo-class to Create a Dev Error Component
05:11
68
Create an Error Page for the Production Server
05:28
69
Use defineAsyncComponent to Conditionally Render the Appropriate Error Page
04:19
70
Set Up Vue.js and Supabase for Seamless Auth Integration
05:33
71
Use v-model to Collect Form Data Values
04:30
72
Register new Users with Supabase Auth and Vue.js
05:32
73
Automatically Generate User Profiles on Registration
03:34
74
Login Users with Supabase Auth and Vue.js
04:39
75
Quick Cleanup for the Login and Register Pages
06:08
76
Set Up Auth Store and Integrate It with Utility Functions
05:43
77
Fetch the User Profile and Update the Auth Store
06:14
78
Retrieve the Auth Session using Supabase Client
05:08
79
Create a Vue Router Guard to Validate the Supabase Auth Session
02:53
80
Manage v-for loops with v-if in Vue.js Using Filters
08:21
81
Use the Vue.js Template Special Element with v-for Loops
03:57
82
Emit Custom Events from Child to Parent in Vue.js
07:23
83
Overcome Challenges of Using Pinia Stores in External Files
07:09
84
Watch for Supabase Auth changes and Update Auth Store
05:26
85
Protect Routes with Navigation Guards
05:52
86
Wait for Pinia Store Updates Before Navigating
04:26
87
Changes to Default Email Provider in Supabase
05:42
88
Handle Supabase Server Auth Errors
05:45
89
Create a Composable for Handling Form Errors
05:21
90
Implement Realtime Form Validation
09:51
91
Use watchDebounced from VueUse
05:07
92
TypeScript Mapping and Generics
05:31
93
Create Dynamic User Profiles
07:02
94
Using Pinia for Efficient Data Loading and Caching
06:26
95
Use useMemoize from VueUse to Optimize Pinia Loader Functions
03:21
96
Implement Stale While Revalidate with Pinia and useMemoize
06:07
97
Update Stale Data with Fresh Data
03:17
98
Set Up Eslint 9 with Flat Config in Vue.js
08:21
99
Create a Vue.js Composable for Projects Collaborators
07:21
100
Fetch and Collect Collaborators Across All Projects
09:27
101
Use Vue.js Render Functions to Render Collaborators
04:47
102
Load the Collaborators Without Impacting Page Loading Speed
05:04
103
Reuse the Pinia Loader to Load Single Project
06:14
104
Make the Pinia Loader Cache Invalidation Logic Reusable
06:59
105
Fix a Little Bug with the Project Title Watcher
02:39
106
Create Text Field Component with defineModel
04:09
107
Emit Custom Events on Input Blur
03:15
108
Update Project Title in the Database
06:20
109
Create a Toggle Component for the Project Status
06:00
110
Update the Project Status in the Database
05:39
111
Use Vue.js Props Destructure to Assign Default Values for Props
04:04
112
Reuse the useCollab Composable in the Project Page
07:10
113
Use defineModel with Textarea and Adjust the Database Schema
04:08
114
It's Showtime: Apply Your Skills to Tasks!
02:43
115
Add Tasks and Projects From Anywhere in the App
07:11
116
How to Install and Use FormKit in Vue.js 3
05:23
117
Create a Form for Tasks using FormKit
05:07
118
Fetch the Select Fields Options from the Database
06:06
119
Validate and Create Tasks
05:52
120
Delete Tasks
08:46
121
Render the Appropriate Layout
03:26
122
Implement Global State with Composables
09:48
123
Use Vue.js Provide and Inject with TypeScript
05:18
124
Combine RouterView and Suspense with the Vue Transition Component
06:54
125
Add Dark Mode Toggle in Vue With useDark from VueUse
05:55
126
Use Vue Meta to Set Dynamic Title and Meta Data
04:08
127
Finished? Not Really—We’re Just Warming Up!
01:55
Unlock unlimited learning

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

Learn more about subscription

Course content

127 lessons · 11h 55m 11s
Show all 127 lessons
  1. 1 Introduction and Project Over-Vue 03:00
  2. 2 Learning Environment Intro 03:15
  3. 3 Prerequisites and Initial Environment 05:21
  4. 4 Scaffolding a Lightning-Fast Vue.js 3 App with Vite 03:31
  5. 5 Powering Up VS Code P1: Vue.js 3 Official Extension 05:16
  6. 6 Powering Up VS Code P2: Eslint for Vue.js 3 11:09
  7. 7 Powering Up VS Code P3: Prettier for Vue.js 3 05:39
  8. 8 Git Basics for Every Developer 07:12
  9. 9 Navigating the Project Directories and Boilerplate Cleanup 07:36
  10. 10 Setting Up Vue Router and Navigation with Router Link 07:31
  11. 11 Lazy Load Routes with Vite’s Dynamic Imports in Vue Router 02:18
  12. 12 Create Dynamic Routes with Wildcards in Vue Router 04:19
  13. 13 Catch All Undefined Routes and Create 404 Not Found Page in Vue Router 05:09
  14. 14 Set Up Auto Routes in Vue Router with TypeScript Support 05:58
  15. 15 Refactor Vue.js Codebase for File-Based Routing 05:40
  16. 16 Supabase: The Perfect Backend for Vue.js Frontend 02:37
  17. 17 Integrate Supabase and Connect with Vue.js 06:06
  18. 18 Secure Secret App Data with Vite Environment Variables 07:31
  19. 19 Use Supabase UI to Create Tables and Rows 05:08
  20. 20 Use Supabase SQL Editor to Create Tables and Rows 05:43
  21. 21 Use Supabase CLI in Vue.js and Connect to the Remote Project 05:09
  22. 22 Create Supabase Database Migration Files in Vue.js 04:43
  23. 23 Getting Started with Fakerjs 04:59
  24. 24 Set Up Supabase JavaScript Client in Node Environment 05:24
  25. 25 Seeding the Supabase Remote Database with Fakerjs 06:05
  26. 26 Insert Bulk Entries Into Supabase Database 02:58
  27. 27 Query Supabase from Vue.js Script Setup 05:21
  28. 28 Use Immediately Invoked Function Expression in Script Setup 03:09
  29. 29 Introduction to Vue.js Reactivity System and Using Refs 05:23
  30. 30 Provide TypeScript Type Definitions for Refs in Vue.js Script Setup 03:48
  31. 31 Add TypeScript Support to Supabase in Vue.js 06:38
  32. 32 Create a New Page for Tasks with Database Migration, Seed and Types 07:54
  33. 33 Getting Started with Shadcn UI and Vue.js 06:38
  34. 34 Prepare the Vue App Layout with TailwindCSS 05:59
  35. 35 Utilize Shadcn Input and Dropdown Components 05:51
  36. 36 Use Lucide Icons with Iconify and Vue.js 03:50
  37. 37 Iconify Icon Web Component in Vue.js 06:19
  38. 38 Create a Sidebar and Organize Code with Vue Components 04:54
  39. 39 Extract a Reusable Vue Component for Sidebar Links 06:58
  40. 40 Configure Vue Router Active Links with TailwindCSS 03:39
  41. 41 Create Layout Vue.js Component 04:50
  42. 42 Build a Vue.js Data Table Component with Shadcn and TanStack 06:24
  43. 43 Customize the Data Table Implementation for Our Vue.js App 06:14
  44. 44 Create a Data Table for the Projects Page 04:04
  45. 45 Make the Data Table Cells Clickable with RouterLink 06:58
  46. 46 Exploring Alternative Ways to Integrate Shadcn and TanStack DataTable 09:17
  47. 47 Integrate unplugin-auto-import with Vue and Vite 07:14
  48. 48 Configure unplugin-auto-import for unplugin-vue-router 05:07
  49. 49 Implement Components Auto Importing Feature in Vue.js 3 06:40
  50. 50 Use Vue.js Suspense Component to Handle Async Dependencies 06:24
  51. 51 Enhance Vue Router with Suspense for Async Components 06:54
  52. 52 Dynamic Page Titles with Pinia 09:11
  53. 53 Retrieve Project Details for Tasks: Querying Nested Database Tables 04:13
  54. 54 Handle Complex Supabase Queries 06:08
  55. 55 Cleaning Time P1: Separating Supabase Queries and Types 05:14
  56. 56 Cleaning Time P2: Separating Column Definitions 03:14
  57. 57 Fetch the Data for the Individual Project Page 07:15
  58. 58 Use the Vue Watch API to Update Pinia Store with the Project Name 03:51
  59. 59 Make the Project Page Template Dynamic 05:23
  60. 60 Exercise: Create Dynamic Indvidual Task Page 07:05
  61. 61 Intro: Why Error Handling Matters for Developers and Users 05:29
  62. 62 Create Global Error Handler in Vue.js with Pinia and Vue Router 05:34
  63. 63 Adjust the Error Page for Custom Errors 07:44
  64. 64 Adjust the Error Page for Supabase Errors 10:09
  65. 65 Adjust the Error Page for Native JavaScript Errors 03:27
  66. 66 Handle Uncaught JavaScript Errors in Vue.js with onErrorCaptured Hook 04:25
  67. 67 Use Props and Vue.js Deep Pseudo-class to Create a Dev Error Component 05:11
  68. 68 Create an Error Page for the Production Server 05:28
  69. 69 Use defineAsyncComponent to Conditionally Render the Appropriate Error Page 04:19
  70. 70 Set Up Vue.js and Supabase for Seamless Auth Integration 05:33
  71. 71 Use v-model to Collect Form Data Values 04:30
  72. 72 Register new Users with Supabase Auth and Vue.js 05:32
  73. 73 Automatically Generate User Profiles on Registration 03:34
  74. 74 Login Users with Supabase Auth and Vue.js 04:39
  75. 75 Quick Cleanup for the Login and Register Pages 06:08
  76. 76 Set Up Auth Store and Integrate It with Utility Functions 05:43
  77. 77 Fetch the User Profile and Update the Auth Store 06:14
  78. 78 Retrieve the Auth Session using Supabase Client 05:08
  79. 79 Create a Vue Router Guard to Validate the Supabase Auth Session 02:53
  80. 80 Manage v-for loops with v-if in Vue.js Using Filters 08:21
  81. 81 Use the Vue.js Template Special Element with v-for Loops 03:57
  82. 82 Emit Custom Events from Child to Parent in Vue.js 07:23
  83. 83 Overcome Challenges of Using Pinia Stores in External Files 07:09
  84. 84 Watch for Supabase Auth changes and Update Auth Store 05:26
  85. 85 Protect Routes with Navigation Guards 05:52
  86. 86 Wait for Pinia Store Updates Before Navigating 04:26
  87. 87 Changes to Default Email Provider in Supabase 05:42
  88. 88 Handle Supabase Server Auth Errors 05:45
  89. 89 Create a Composable for Handling Form Errors 05:21
  90. 90 Implement Realtime Form Validation 09:51
  91. 91 Use watchDebounced from VueUse 05:07
  92. 92 TypeScript Mapping and Generics 05:31
  93. 93 Create Dynamic User Profiles 07:02
  94. 94 Using Pinia for Efficient Data Loading and Caching 06:26
  95. 95 Use useMemoize from VueUse to Optimize Pinia Loader Functions 03:21
  96. 96 Implement Stale While Revalidate with Pinia and useMemoize 06:07
  97. 97 Update Stale Data with Fresh Data 03:17
  98. 98 Set Up Eslint 9 with Flat Config in Vue.js 08:21
  99. 99 Create a Vue.js Composable for Projects Collaborators 07:21
  100. 100 Fetch and Collect Collaborators Across All Projects 09:27
  101. 101 Use Vue.js Render Functions to Render Collaborators 04:47
  102. 102 Load the Collaborators Without Impacting Page Loading Speed 05:04
  103. 103 Reuse the Pinia Loader to Load Single Project 06:14
  104. 104 Make the Pinia Loader Cache Invalidation Logic Reusable 06:59
  105. 105 Fix a Little Bug with the Project Title Watcher 02:39
  106. 106 Create Text Field Component with defineModel 04:09
  107. 107 Emit Custom Events on Input Blur 03:15
  108. 108 Update Project Title in the Database 06:20
  109. 109 Create a Toggle Component for the Project Status 06:00
  110. 110 Update the Project Status in the Database 05:39
  111. 111 Use Vue.js Props Destructure to Assign Default Values for Props 04:04
  112. 112 Reuse the useCollab Composable in the Project Page 07:10
  113. 113 Use defineModel with Textarea and Adjust the Database Schema 04:08
  114. 114 It's Showtime: Apply Your Skills to Tasks! 02:43
  115. 115 Add Tasks and Projects From Anywhere in the App 07:11
  116. 116 How to Install and Use FormKit in Vue.js 3 05:23
  117. 117 Create a Form for Tasks using FormKit 05:07
  118. 118 Fetch the Select Fields Options from the Database 06:06
  119. 119 Validate and Create Tasks 05:52
  120. 120 Delete Tasks 08:46
  121. 121 Render the Appropriate Layout 03:26
  122. 122 Implement Global State with Composables 09:48
  123. 123 Use Vue.js Provide and Inject with TypeScript 05:18
  124. 124 Combine RouterView and Suspense with the Vue Transition Component 06:54
  125. 125 Add Dark Mode Toggle in Vue With useDark from VueUse 05:55
  126. 126 Use Vue Meta to Set Dynamic Title and Meta Data 04:08
  127. 127 Finished? Not Really—We’re Just Warming Up! 01:55

Related courses

  • Content Sites with Astro and Vue.js thumbnail

    Content Sites with Astro and Vue.js

    By: Vue School
    Want to create a fast and efficient site with content? In this course, you will learn how to use Astro and Vue.js together to develop high-performance.
    1 hour 3 minutes 38 seconds
  • Robust Vue.js Forms with FormKit thumbnail

    Robust Vue.js Forms with FormKit

    By: Vue School
    Forms are the core of interactive and dynamic web pages. They accept user input and must respond to that input often in real time and in a variety of ways. Form
    2 hours 4 minutes 52 seconds
  • Nuxt.js - Vue.js on Steroids thumbnail

    Nuxt.js - Vue.js on Steroids

    By: Udemy
    Join our Nuxt.js course to enhance your Vue.js apps. Learn server-side rendering and build optimized, server-rendered or static Vue applications with ease.
    6 hours 27 minutes 50 seconds

Frequently asked questions

What is Vue.js Master Class 2024 Edition about?
Master Vue.js in 2024 by building a real-world application from scratch! This advanced course by Vue School guides you through the ins and outs of Vue.js, incorporating best practices, modern JavaScript, and impressive technologies, all…
Who teaches Vue.js Master Class 2024 Edition?
Vue.js Master Class 2024 Edition is taught by Vue School. You can find more courses by this instructor on the corresponding source page.
How long is Vue.js Master Class 2024 Edition?
Vue.js Master Class 2024 Edition contains 127 lessons with a total runtime of 11 hours 55 minutes. All lessons are available to watch online at your own pace.
Is Vue.js Master Class 2024 Edition free to watch?
Vue.js Master Class 2024 Edition is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Vue.js Master Class 2024 Edition online?
Vue.js Master Class 2024 Edition is available to watch online on CourseFlix at https://courseflix.net/course/vue-js-master-class-2024-edition. The page hosts every lesson with the integrated video player; no download is required.