Scaffolding a Lightning-Fast Vue.js 3 App with Vite

Introduction and Project Over-Vue

Learning Environment Intro

Prerequisites and Initial Environment

Powering Up VS Code P1 Vue.js 3 Official Extension

Powering Up VS Code P3 Prettier for Vue.js 3

Git Basics for Every Developer

Navigating the Project Directories and Boilerplate Cleanup

Lazy Load Routes with Vite�s Dynamic Imports in Vue Router

Setting Up Vue Router and Navigation with Router Link

Create Dynamic Routes with Wildcards in Vue Router

Catch All Undefined Routes and Create 404 Not Found Page in Vue Router

Refactor Vue.js Codebase for File-Based Routing

Set Up Auto Routes in Vue Router with TypeScript Support

Supabase The Perfect Backend for Vue.js Frontend

Integrate Supabase and Connect with Vue.js

Use Supabase UI to Create Tables and Rows

Secure Secret App Data with Vite Environment Variables

Use Supabase SQL Editor to Create Tables and Rows

Use Supabase CLI in Vue.js and Connect to the Remote Project

Getting Started with Fakerjs

Create Supabase Database Migration Files in Vue.js

Set Up Supabase JavaScript Client in Node Environment

Seeding the Supabase Remote Database with Fakerjs

Query Supabase from Vue.js Script Setup

Insert Bulk Entries Into Supabase Database

Use Immediately Invoked Function Expression in Script Setup

Introduction to Vue.js Reactivity System and Using Refs

Provide TypeScript Type Definitions for Refs in Vue.js Script Setup

Add TypeScript Support to Supabase in Vue.js

Create a New Page for Tasks with Database Migration, Seed and Types

Getting Started with Shadcn UI and Vue.js

Prepare the Vue App Layout with TailwindCSS

Utilize Shadcn Input and Dropdown Components

Use Lucide Icons with Iconify and Vue.js

Create a Sidebar and Organize Code with Vue Components

Iconify Icon Web Component in Vue.js

Extract a Reusable Vue Component for Sidebar Links

Configure Vue Router Active Links with TailwindCSS

Build a Vue.js Data Table Component with Shadcn and TanStack

Create Layout Vue.js Component

Customize the Data Table Implementation for Our Vue.js App

Create a Data Table for the Projects Page

Make the Data Table Cells Clickable with RouterLink

Exploring Alternative Ways to Integrate Shadcn and TanStack DataTable

Integrate unplugin-auto-import with Vue and Vite

Configure unplugin-auto-import for unplugin-vue-router

Implement Components Auto Importing Feature in Vue.js 3

Use Vue.js Suspense Component to Handle Async Dependencies

Enhance Vue Router with Suspense for Async Components

Dynamic Page Titles with Pinia

Retrieve Project Details for Tasks Querying Nested Database Tables

Handle Complex Supabase Queries

Cleaning Time P1 Separating Supabase Queries and Types

Fetch the Data for the Individual Project Page

Cleaning Time P2 Separating Column Definitions

Use the Vue Watch API to Update Pinia Store with the Project Name

Make the Project Page Template Dynamic

Exercise Create Dynamic Indvidual Task Page

Intro Why Error Handling Matters for Developers and Users

Create Global Error Handler in Vue.js with Pinia and Vue Router

Adjust the Error Page for Custom Errors

Adjust the Error Page for Native JavaScript Errors

Adjust the Error Page for Supabase Errors

Handle Uncaught JavaScript Errors in Vue.js with onErrorCaptured Hook

Create an Error Page for the Production Server

Use Props and Vue.js Deep Pseudo-class to Create a Dev Error Component

Use defineAsyncComponent to Conditionally Render the Appropriate Error Page

Register new Users with Supabase Auth and Vue.js

Use v-model to Collect Form Data Values

Set Up Vue.js and Supabase for Seamless Auth Integration

Automatically Generate User Profiles on Registration

Login Users with Supabase Auth and Vue.js

Quick Cleanup for the Login and Register Pages

Set Up Auth Store and Integrate It with Utility Functions

Fetch the User Profile and Update the Auth Store

Create a Vue Router Guard to Validate the Supabase Auth Session

Retrieve the Auth Session using Supabase Client

Manage v-for loops with v-if in Vue.js Using Filters

Use the Vue.js Template Special Element with v-for Loops

Emit Custom Events from Child to Parent in Vue.js

Overcome Challenges of Using Pinia Stores in External Files

Protect Routes with Navigation Guards

Watch for Supabase Auth changes and Update Auth Store

Wait for Pinia Store Updates Before Navigating

Changes to Default Email Provider in Supabase

Handle Supabase Server Auth Errors

Implement Realtime Form Validation

Use watchDebounced from VueUse

Create a Composable for Handling Form Errors

TypeScript Mapping and Generics

Using Pinia for Efficient Data Loading and Caching

Create Dynamic User Profiles

Use useMemoize from VueUse to Optimize Pinia Loader Functions

Update Stale Data with Fresh Data

Implement Stale While Revalidate with Pinia and useMemoize

Create a Vue.js Composable for Projects Collaborators

Set Up Eslint 9 with Flat Config in Vue.js

Use Vue.js Render Functions to Render Collaborators

Load the Collaborators Without Impacting Page Loading Speed

Fetch and Collect Collaborators Across All Projects

Reuse the Pinia Loader to Load Single Project

Fix a Little Bug with the Project Title Watcher

Create Text Field Component with defineModel

Emit Custom Events on Input Blur

Make the Pinia Loader Cache Invalidation Logic Reusable

Update Project Title in the Database

Update the Project Status in the Database

Create a Toggle Component for the Project Status

Use Vue.js Props Destructure to Assign Default Values for Props

Use defineModel with Textarea and Adjust the Database Schema

Reuse the useCollab Composable in the Project Page

It's Showtime Apply Your Skills to Tasks!

Add Tasks and Projects From Anywhere in the App

Create a Form for Tasks using FormKit

How to Install and Use FormKit in Vue.js 3

Fetch the Select Fields Options from the Database

Validate and Create Tasks

Delete Tasks

Render the Appropriate Layout

Use Vue.js Provide and Inject with TypeScript

Implement Global State with Composables

Combine RouterView and Suspense with the Vue Transition Component

Add Dark Mode Toggle in Vue With useDark from VueUse

Use Vue Meta to Set Dynamic Title and Meta Data

Finished Not Really�We�re Just Warming Up!