Supabase & Vue 3 (with Quasar & Pinia)
Published 1/2025
Created by Danny Connell
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz, 2 Ch
Level: Intermediate | Genre: eLearning | Language: English | Duration: 123 Lectures ( 6h 21m ) | Size: 5.22 GB
Connect a Vue 3 & Quasar app to Supabase: with Auth, RLS, Database Functions, Storage, Edge Functions & Local Supabase
What you'll learn
How to connect a Quasar 2 app to a Supabase backend
Add full Realtime CRUD capabilities: Read, Insert, Update, Delete & Realtime
Add Supabase Authentication so your users can Register, Login & Log out
Add Security with Navigation Guards & Supabase Row Level Security & Policies
Add Supabase Storage so your users can upload an avatar (& display it in the app)
How to run Supabase Locally & How to Push Local Changes to the Live Instance
How to create Supabase Edge Functions
How to get the finished app built & working for Web, iOS, Android, Mac & Windows
Requirements
Basic understanding of Vue 3, Quasar, Pinia & JavaScript
Description
In this course, you'll learn how to connect a Quasar 2 app (with Vue 3 & Pinia) to a Supabase backend.You'll start by downloading and launching the course app, Moneyballs (from my course Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia).You'll connect Moneyballs to a Supabase Database and add full CRUD capabilities for one user:Read and display Entries from SupabaseAdd EntryDelete EntryUpdate EntryReorder EntriesRealtime UpdatesYou'll then create an Auth page where a user can login & register and setup Supabase Authentication:Register UserLogout UserLogin UserListen for Auth ChangesRedirect the User on Login & LogoutYou'll then add support for Multiple Users and add security to the app:Navigation GuardsSupabase Row Level Security (RLS) & PoliciesNext you'll learn about Database Functions & Triggers, you will:Create a Database Function which keeps track of the total number of entries created with MoneyballsLearn how to fire the Database Function straight from MoneyballsCreate a Trigger which fires this Database Function (automatically) every time any user adds a new entryYou'll learn about Supabase Storage, you will:Create an Avatars Storage BucketAllow each user to upload an AvatarDisplay the Avatar within MoneyballsNext you'll learn how to take your entire Supabase instance and run it locally, you'll:Install Supabase locallyImport all Database Tables & Data from the Live Supabase instanceLearn how to make changes to the Database locallyLearn how to push these changes to the Live instanceYou'll then learn about Edge Functions, you will:Create an Edge Function (locally) which displays a random greeting to the userAccess Auth and the Database in the Edge Function, so that we can display the user's total number of entries in the greetingDeploy the local Edge Function to the Live Supabase instanceFinally, you'll build the app for production and get it working on 5 platforms:Web browseriOSAndroidMacWindowsFor this course, I recommend:Having completed my course Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia)Using a MacHaving a basic understanding of Vue 3 (Composition API), Quasar, Pinia & JavaScript
Who this course is for
Vue 3 & Quasar Developers looking to create a backend for their Cross-Platform App with Supabase
Homepage
Supabase & Vue 3 (with Quasar & Pinia)
