Vue.js Master Class 2024 Edition

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