Supabase & Vue 3 (with Quasar & Pinia)

Connect a Vue 3 (Quasar 2) app with Supabase - including Authentication, Realtime, Database Functions & Triggers, Storage, Edge Functions & Running Supabase Locally

   Watch Promo

Get started now!



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:


Your Instructor


Danny Connell
Danny Connell

I spent 7 years working for various companies in the UK as a Web Developer (both front- and back-end) becoming highly skilled in HTML, CSS, JavaScript, jQuery, PHP and many more.

After becoming more interested in apps, I worked for 2 years as a Hybrid App Developer, creating cross-platform apps for the charity sector using technologies including Angular, Ionic, Vue.js and more.

I created my own successful app called Fudget (for iOS, Android, Mac & Windows) which is the highest user-rated personal finance app on iOS with over 2 million downloads. This eventually enabled me to leave my job and become a full-time Indie App Developer, working on my own apps.

I have a successful YouTube channel where I also share coding tutorials.

I'm super excited to share my knowledge here!


Course Curriculum


  16 Bonus Lectures
Available in days
days after you enroll

Frequently Asked Questions


When does the course start and finish?
The course starts now and never ends! It is a completely self-paced online course - you decide when you start and when you finish.
How long do I have access to the course?
How does lifetime access sound? After enrolling, you have unlimited access to this course for as long as you like - across any and all devices you own.
What if I am unhappy with the course?
We would never want you to be unhappy! If you are unsatisfied with your purchase, contact us in the first 30 days and we will give you a full refund.

Get started now!