Vue JS Essentials: A Beginners Series w/ Pinia, Vitest, and Supabase. Part 3, SignIn & SignUp

Описание: Vue JS Essentials: A Beginners Vue JS Series on Using Pinia, Vitest, and Supabase. Part 3, Supabase SignIn, SignUp and Using Pina Store for Managing User State
#pinia #vue #vitest #supabase

NO MORE TYPESCRIPT IN THIS SERIES
After some thought since this is a beginners' series, I have removed typescript from this video and will be refactoring it out of the rest of the files as we move forward

In this video, we create screens for SignIn and leverage the wizard we created in the previous videos for the SignUp Screen. We created a new Pinia store for managing the user's state and integrated the supabase client into the store. We also add a vue router to the application and integrated the user store into the router to control access to certain screens based on the users' authentication state. We discussed how to listen for authentication events to update the user store.

Vuejs - The Progressive JavaScript Framework. An approachable, performant, and versatile framework for building web user interfaces.
https://vuejs.org/

Pinia -The intuitive store for Vue.js. Type Safe, Extensible, and Modular by design. Forget you are even using a store.
https://pinia.vuejs.org/

Vitest - Blazing Fast Unit Test Framework. A Vite-native unit test framework. It's fast!
https://vitest.dev/

Supabase - Supabase is an open source Firebase alternative. Start your project with a Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, and Storage.
https://supabase.com/

vue-use-form - A composition api form validator for vue
https://vue-use-form.netlify.app/


💥 The Series
-----------------------
Part One -    • Vue JS Essentials: A Beginners Vue JS Seri...  
Part Two -    • Vue JS Essentials: A Beginners Series on P...  
Part Three -    • Vue JS Essentials: A Beginners Series w/ P...  

💥 Chapters
-------------------------
00:00 - Intro
01:20 - Review What Was Covered In First Two Videos
02:00 - Adding Vue-Router To Application And Appropriate Pages
03:20 - Adding Login Page
04:56 - Adding AuthStore Usnig Pinia, Scaffold Out Functions
08:02 - Adding Create Account Page
08:32 - Adding route.js File To Project
13:20 - Adding Home Page
15:00 - Debugging Errors, Mistakes In Code
16:47 - Connect Login Page to login function in authStore
18:20 - Connect Create Account Page to createAccount function in authStore
20:24 - Integrating Supabase (https://app.supabase.com/projects)
25:55 - Supabase User Login
31:40 - Supabase User Create Account
38:32 - Listening To Authentication Events To Update authStore, Adding Logout
48:19 - Protecting Routes with beforeEach


💥 Social Media
-------------------------
Twitter -   / aaronksaunders  
Facebook -   / clearlyinnovativeinc  
Instagram -   / aaronksaunders  
Dev.to - https://dev.to/aaronksaunders

#ionic #ionicframework #vuejs #vuejsdevelopers

~-~~-~~~-~~-~
Please watch: "Getting Started With Appwrite, Vue JS Ionic Framework & Capacitor"
   • Ionic Vue, Getting Started With Appwrite  
~-~~-~~~-~~-~