Vue 3 & Firebase 9 Tutorial (Cloud Firestore) 

Learn how to get started with Firebase 9 in a Vue 3 project.
👉 Full Vue 3 & Firebase 9 Course: dannys.link/compositionapi
⬇ Chapters: ⬇
0:00 Introduction
0:37 Getting Started
2:35 Elements & Styles - Add Todo
5:28 Elements & Styles - Todo List
9:06 Todos Ref
11:00 Add Todo
17:26 Delete Todo
20:01 Mark Done
26:01 Firebase - Project Setup
28:17 Firebase - Cloud Firestore Setup
32:05 Firebase - Display Todos from Firestore
37:41 Firebase - Get Todos in Real Time
44:00 Firebase - Add Todo
49:28 Firebase - Delete Todo
51:44 Firebase - Mark Done
55:07 Firebase - Order by Date
We’re gonna create a simple todo app called Badass Todo.
We’ll make it look pretty using Bulma.
Then we’re gonna get it all working locally first using Vue 3 & Composition API (so that we can display todos, add a todo, delete a todo and mark a todo as done).
Then we’re gonna hook it all up to a Firebase 9 Cloud Firestore database, with full CRUD capabilities & Realtime Data Sync across devices, so if we add a todo on one device (or browser), we see it popup on another device (or browser).
👉 Vue 3, Firebase 9 & Pinia Course: dannys.link/compositionapi
👉 My Courses - dannys.link/courses
👉 Download Fudget: www.fudget.com
👉 My VSCode Setup - dannys.link/vscodesetup
👉 DONT CLICK THIS - dannys.link/dontclick