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: https://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: https://dannys.link/compositionapi
👉 My Courses - https://dannys.link/courses
👉 Download Fudget: https://www.fudget.com
👉 My VSCode Setup - https://dannys.link/vscodesetup
👉 DONT CLICK THIS - https://dannys.link/dontclick