Supabase & Vue 3 (with Quasar & Pinia)

Connect a Vue 3 & Quasar app to Supabase: with Auth, RLS, Database Functions, Storage, Edge Functions & Local Supabase

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 Supabase

• Add Entry

• Delete Entry

• Update Entry

• Reorder Entries

• Realtime Updates

You'll then create an Auth page where a user can login & register and setup Supabase Authentication:

• Register User

• Logout User

• Login User

• Listen for Auth Changes

• Redirect the User on Login & Logout

You'll then add support for Multiple Users and add security to the app:

• Navigation Guards

• Supabase Row Level Security (RLS) & Policies

Next you'll learn about Database Functions & Triggers, you will:

• Create a Database Function which keeps track of the total number of entries created with Moneyballs

• Learn how to fire the Database Function straight from Moneyballs

• Create a Trigger which fires this Database Function (automatically) every time any user adds a new entry

You'll learn about Supabase Storage, you will:

• Create an Avatars Storage Bucket

• Allow each user to upload an Avatar

• Display the Avatar within Moneyballs

Next you'll learn how to take your entire Supabase instance and run it locally, you'll:

• Install Supabase locally

• Import all Database Tables & Data from the Live Supabase instance

• Learn how to make changes to the Database locally

• Learn how to push these changes to the Live instance

You'll then learn about Edge Functions, you will:

• Create an Edge Function (locally) which displays a random greeting to the user

• Access Auth and the Database in the Edge Function, so that we can display the user's total number of entries in the greeting

• Deploy the local Edge Function to the Live Supabase instance

Finally, you'll build the app for production and get it working on 5 platforms:

• Web browser

• iOS

• Android

• Mac

• Windows

For this course, I recommend:

• Having completed my course Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia)

• Using a Mac

• Having a basic understanding of Vue 3 (Composition API), Quasar, Pinia & JavaScript