Vue.js Master Class 2024 Edition

11h 55m 11s
English
Paid

Learn by building a real-world application from scratch! This comprehensive course by Vue School teaches you Vue.js, best practices, modern JavaScript, and exciting technologies by developing a forum. Topics include Vue CLI, Vue Router, Vuex, state management, third-party authentication, REST API consumption, SEO, and more. The course is suitable for existing Vue developers, other developers, students, and developer teams. Requirements include familiarity with JavaScript and basic ES6. Taught by experienced instructors like Alex Kyriakidis and Daniel Kelly.

Watch Online Vue.js Master Class 2024 Edition

Join premium to watch
Go to premium
# Title Duration
1 Introduction and Project Over-Vue 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

Similar courses to Vue.js Master Class 2024 Edition

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

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

Category: NestJS, Vue, Nuxt
Duration 7 hours 37 minutes 36 seconds
The Vue.js 3 Masterclass

The Vue.js 3 Masterclassvueschool.io

Category: Vue
Duration 17 hours 7 minutes 33 seconds
Reusable Components

Reusable ComponentsMichael Thiessen

Category: Vue
Duration 4 hours 10 minutes 42 seconds
Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)

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

Category: Vue
Duration 27 hours 56 minutes 34 seconds
Ethereum and Solidity: Build Dapp with VueJS

Ethereum and Solidity: Build Dapp with VueJSudemy

Category: Decentralized Applications (dApps) / 'Web 3', Vue
Duration 1 hour 45 minutes 9 seconds
Vue 3 and Nuxt.js: Different Ways of Creating Vue Apps

Vue 3 and Nuxt.js: Different Ways of Creating Vue Appsudemy

Category: Vue, Nuxt
Duration 4 hours 59 minutes 48 seconds