Aaron Saunders
Part 3 - How To Build A Supabase Nuxt 3 Ionic Capacitor Starter App, Setup and Authentication
How To Build A Nuxt 3 Ionic Capacitor Starter App, Supabase Setup and Authentication
#nuxt3 #nuxt #supabase #capacitor
Nuxt - The Hybrid Vue Framework - https://v3.nuxtjs.org/
Capacitor - Drop Capacitor into any existing web project, framework or library. Convert an existing React, Svelte, Vue (or your preferred Web Framework) project to native mobile. - https://capacitorjs.com/
Ionic Framework - An open source mobile toolkit for building high quality, cross-platform native and web app experiences. Move faster with a single code base, running everywhere with JavaScript and the Web. - https://ionicframework.com/
Supabase - Supabase is an open source Firebase alternative. Start your project with a Postgres Database, Authentication, instant APIs, Realtime subscriptions and Storage. - https://supabase.com/
This is a series of videos walking you through how to get started with building a mobile application with Nuxt 3 and Ionic Capacitor. In this video, we add Supabase Account Creation and Authentication to the project and deploy it to a mobile device
We also touch on the following Nuxt 3 Topics
- composables - https://v3.nuxtjs.org/guide/directory-structure/composables/
- plugins - https://v3.nuxtjs.org/guide/directory-structure/plugins
- configuration - https://v3.nuxtjs.org/api/configuration/nuxt.config
- middleware - https://v3.nuxtjs.org/guide/directory-structure/middleware
Timestamps
--------------------
00:00 intro
01:43 Supabase Setup
05:00 Nuxt Config Changes to Access API Keys
06:50 Create Nuxt Plugin To Initialize Supabase Client
09:48 Create Composable to Access Supabase Client In App
13:18 Add Login Screen and Supabase Sign In API Call
23:05 Add Create Account Screen and Supabase Sign Up API Call
29:00 Turn Off Email Verification in Supabase, Missed This Earlier
32:58 Protected Routes Using Nuxt 3 Middleware
39:26 Ran Into Error With Provide and Inject
45:45 Deploy On Mobile
Blog
-------
https://dev.to/aaronksaunders/how-to-build-a-nuxt-3-ionic-capacitor-starter-app-supabase-setup-and-authentication-3gd0
Source Code
--------------------
https://github.com/aaronksaunders/ionic-capacitor-nuxt-video-app/tree/part-3
Videos In Series
--------------------------
Part 1 - https://youtu.be/tDYPZvjVTcc
Part 2 - https://youtu.be/jwntqsrTXc4
Part 3 - https://youtu.be/SgnNFiMlHJE
Follow Me
-------------------------------------------
twitter - https://twitter.com/aaronksaunders
github - https://github.com/aaronksaunders
udemy - https://www.udemy.com/user/aaronsaunders
gumroad - https://app.gumroad.com/fiwic
#vuejs #nuxt #nuxtjs #javascript #ionic #ionicframework #capacitor #nativeapps #mobileapps #supabase
https://www.clearlyinnovative.com