Learn Vue JS course Learn Javascript and Vue JS Learn VueJS course Learn VueJS Tutorial

Vue.js Master Class 2024 Edition

Learn how to build a real-world application with Vue.js with the latest and greatest tech including the Composition API, Pinia, Vite, and more!

  • 127 lessons
  • 11 hrs
  • Intermediate
Illustration image of Vue.js Master Class 2024 Edition

About the Vue.js Master Class 2024 Edition course

The Vue.js Master Class is our signature course and THE most popular source online for learning how to build a real world Vue.js application from scratch. This 2024 Edition of the course is a complete re-write with the latest and great official and community Vue.js technologies.

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

During this video course, we focus on learning practical application and strategies for Vue.js by building a feature-rich product management app together. The goal of this course is to teach you Vue.js along with Best Practices, Modern Javascript, and other exciting technologies, by building a Real World application.

We cover the fundamentals, like:

We also dive into practical real world features and how to implement them quickly:

  • Robust and beautiful components with TailwindCSS and ShadCN Vue
  • Forms and Validation with Formkit
  • Auto saving on edits to inline content
  • Set up Dark Mode
  • Custom Pinia loaders

By completing the Vue.js Masterclass, you will be able to land any Vue.js related job or optimize/improve your own projects!

Requirements You should be familiar with JavaScript, HTML, basic CSS, and have fundamental knowledge of Vue.js (specifically with the Composition API).

If you are just starting out with Vue.js, we suggest that you watch our free course Vue.js Fundamentals with the Composition API along with the Vue Component Fundamentals with the Composition API course. These courses will help you learn Vue.js fundamentals and prepare for the journey ahead.

1

Ready, Set, Code!

8 lessons • 43 min
Introduction and Project Over-Vue FREE
2:59
Learning Environment Intro FREE
3:14
Prerequisites and Initial Environment
5:20
Scaffolding a Lightning-Fast Vue.js 3 App with Vite
3:30
Powering Up VS Code P1: Vue.js 3 Official Extension
5:15
Powering Up VS Code P2: Eslint for Vue.js 3
10:36
Powering Up VS Code P3: Prettier for Vue.js 3
5:38
Git Basics for Every Developer FREE
7:11
2

Project Structure and Routing

7 lessons • 38 min
Navigating the Project Directories and Boilerplate Cleanup
7:35
Setting Up Vue Router and Navigation with Router Link
7:30
Lazy Load Routes with Vite’s Dynamic Imports in Vue Router
2:17
Create Dynamic Routes with Wildcards in Vue Router
4:18
Catch All Undefined Routes and Create 404 Not Found Page in Vue Router
5:08
Set Up Auto Routes in Vue Router with TypeScript Support
5:57
Refactor Vue.js Codebase for File-Based Routing
5:38
3

Bootstrap the App Backend with Supabase

17 lessons • 1 hr
Supabase: The Perfect Backend for Vue.js Frontend
2:35
Integrate Supabase and Connect with Vue.js
6:04
Secure Secret App Data with Vite Environment Variables
7:29
Use Supabase UI to Create Tables and Rows
5:06
Use Supabase SQL Editor to Create Tables and Rows
5:41
Use Supabase CLI in Vue.js and Connect to the Remote Project
5:07
Create Supabase Database Migration Files in Vue.js
4:41
Getting Started with Fakerjs
4:57
Set Up Supabase JavaScript Client in Node Environment
5:22
Seeding the Supabase Remote Database with Fakerjs
6:03
Insert Bulk Entries Into Supabase Database
2:56
Query Supabase from Vue.js Script Setup
5:19
Use Immediately Invoked Function Expression in Script Setup
3:07
Introduction to Vue.js Reactivity System and Using Refs
5:21
Provide TypeScript Type Definitions for Refs in Vue.js Script Setup
3:46
Add TypeScript Support to Supabase in Vue.js
6:36
Create a New Page for Tasks with Database Migration, Seed and Types
7:53
4

Adding UI Elegance with Style

14 lessons • 1 hr
Getting Started with Shadcn UI and Vue.js
6:37
Prepare the Vue App Layout with TailwindCSS
5:58
Utilize Shadcn Input and Dropdown Components
5:50
Use Lucide Icons with Iconify and Vue.js
3:49
Iconify Icon Web Component in Vue.js
6:18
Create a Sidebar and Organize Code with Vue Components
4:53
Extract a Reusable Vue Component for Sidebar Links
6:57
Configure Vue Router Active Links with TailwindCSS
3:38
Create Layout Vue.js Component
4:49
Build a Vue.js Data Table Component with Shadcn and TanStack FREE
6:23
Customize the Data Table Implementation for Our Vue.js App
6:13
Create a Data Table for the Projects Page
4:03
Make the Data Table Cells Clickable with RouterLink
6:56
Exploring Alternative Ways to Integrate Shadcn and TanStack DataTable
9:15
5

Refactoring The Project Architecture for Scalability

14 lessons • 1 hr
Integrate unplugin-auto-import with Vue and Vite
7:12
Configure unplugin-auto-import for unplugin-vue-router
5:05
Implement Components Auto Importing Feature in Vue.js 3
6:38
Use Vue.js Suspense Component to Handle Async Dependencies FREE
6:22
Enhance Vue Router with Suspense for Async Components
6:52
Dynamic Page Titles with Pinia
9:09
Retrieve Project Details for Tasks: Querying Nested Database Tables
4:11
Handle Complex Supabase Queries
6:06
Cleaning Time P1: Separating Supabase Queries and Types
5:12
Cleaning Time P2: Separating Column Definitions
3:12
Fetch the Data for the Individual Project Page
7:13
Use the Vue Watch API to Update Pinia Store with the Project Name
3:49
Make the Project Page Template Dynamic
5:21
Exercise: Create Dynamic Indvidual Task Page
7:03
6

The Perfect Technique for Global Error Handling

9 lessons • 51 min
Intro: Why Error Handling Matters for Developers and Users
5:27
Create Global Error Handler in Vue.js with Pinia and Vue Router
5:32
Adjust the Error Page for Custom Errors
7:42
Adjust the Error Page for Supabase Errors
10:07
Adjust the Error Page for Native JavaScript Errors
3:25
Handle Uncaught JavaScript Errors in Vue.js with onErrorCaptured Hook
4:23
Use Props and Vue.js Deep Pseudo-class to Create a Dev Error Component
5:09
Create an Error Page for the Production Server
5:26
Use defineAsyncComponent to Conditionally Render the Appropriate Error Page
4:17
7

Authentication System with Supabase and State Management

23 lessons • 2 hrs
Set Up Vue.js and Supabase for Seamless Auth Integration
5:31
Use v-model to Collect Form Data Values
4:28
Register new Users with Supabase Auth and Vue.js
5:30
Automatically Generate User Profiles on Registration
3:32
Login Users with Supabase Auth and Vue.js
4:37
Quick Cleanup for the Login and Register Pages
6:06
Set Up Auth Store and Integrate It with Utility Functions
5:41
Fetch the User Profile and Update the Auth Store
6:12
Retrieve the Auth Session using Supabase Client
5:06
Create a Vue Router Guard to Validate the Supabase Auth Session
2:51
Manage v-for loops with v-if in Vue.js Using Filters
8:19
Use the Vue.js Template Special Element with v-for Loops
3:55
Emit Custom Events from Child to Parent in Vue.js
7:21
Overcome Challenges of Using Pinia Stores in External Files
7:07
Watch for Supabase Auth changes and Update Auth Store
5:24
Protect Routes with Navigation Guards
5:50
Wait for Pinia Store Updates Before Navigating
4:24
Changes to Default Email Provider in Supabase
5:40
Handle Supabase Server Auth Errors
5:43
Create a Composable for Handling Form Errors
5:19
Implement Realtime Form Validation
9:49
Use watchDebounced from VueUse
5:06
TypeScript Mapping and Generics FREE
5:30
8

CRUD Operations

28 lessons • 2 hrs
Create Dynamic User Profiles
7:01
Using Pinia for Efficient Data Loading and Caching
6:25
Use useMemoize from VueUse to Optimize Pinia Loader Functions
3:20
Implement Stale While Revalidate with Pinia and useMemoize FREE
6:06
Update Stale Data with Fresh Data
3:16
Set Up Eslint 9 with Flat Config in Vue.js
8:20
Create a Vue.js Composable for Projects Collaborators
7:20
Fetch and Collect Collaborators Across All Projects
9:26
Use Vue.js Render Functions to Render Collaborators
4:46
Load the Collaborators Without Impacting Page Loading Speed
5:03
Reuse the Pinia Loader to Load Single Project
6:13
Make the Pinia Loader Cache Invalidation Logic Reusable
6:58
Fix a Little Bug with the Project Title Watcher
2:38
Create Text Field Component with defineModel
4:08
Emit Custom Events on Input Blur
3:09
Update Project Title in the Database
6:19
Create a Toggle Component for the Project Status
5:59
Update the Project Status in the Database
5:38
Use Vue.js Props Destructure to Assign Default Values for Props
4:03
Reuse the useCollab Composable in the Project Page
7:09
Use defineModel with Textarea and Adjust the Database Schema
4:07
It's Showtime: Apply Your Skills to Tasks!
2:42
Add Tasks and Projects From Anywhere in the App
7:10
How to Install and Use FormKit in Vue.js 3
5:22
Create a Form for Tasks using FormKit
5:06
Fetch the Select Fields Options from the Database
6:05
Validate and Create Tasks
5:51
Delete Tasks
8:45
9

Wrapping Up

7 lessons • 37 min
Render the Appropriate Layout
3:25
Implement Global State with Composables
9:47
Use Vue.js Provide and Inject with TypeScript
5:17
Combine RouterView and Suspense with the Vue Transition Component
6:53
Add Dark Mode Toggle in Vue With useDark from VueUse
5:54
Use Vue Meta to Set Dynamic Title and Meta Data
4:07
Finished? Not Really—We’re Just Warming Up!
1:54