Download VueSchool – Vue.js Master Class 2024 Edition Course for Free

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 P2 Eslint for Vue.js 3

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