Build a Realtime Full-stack ToDo App in 15 Minutes with Vue, Vuetify, VueFire, and Firebase

In this tutorial, we're going to be building a realtime full-stack todo list app in record time using Vue, Vuetify, VueFire, and Firebase. We all know that Firebase makes it extremely quick to build out an app, but throw VueFire and Vuetify on top of that and you'll have your app done in half the time.

Timestamps
0:00 - Intro
0:18 - Firebase Setup
1:26 - Installing Vue CLI
1:54 - Creating the Vue project
2:20 - Adding Vuetify to project
2:53 - Adding VueFire and Firebase npm packages to the project
3:05 - Setting up the Firestore in our project
5:25 - Coding the ToDo List
14:49 - App Demo

Vuetify

Firebase

VueFire

Medium Article

Git Repo

#vuejs #firebase #vuetify

[billyarredondopucp]

Oh buddy, this tutorial is quick and comprehensive ... I love it! Thank you!
Keep making more videos like this, please.

[randerins]

Fantastic little app for Vue beginners. And the best thing, it's fast!

[FirstLast-gklg]

Excellent tutorial!!! Absolutely subbed and going to watch more from you. Can you go more into depth on CRUD operations with firebase/firestore?

[passivecryptoearnings]

Wow, finally a good tutorial. Thank you very much sir.

[ankitupadhyay]

For this todo app how we can create the markdown document please guide about markdown document

[oogabooga]

Note vuefire isnt yet compatible with vue 3 or firebase version 9

[BenHayat]

So Rob, what does VueFire bring to the table?

Also, since you created a ToDos property under firestore, couldn't you use that in your methods than typing db.collection("ToDos")?

[diolee]

a typo in source, v-cols should be v-col

[farukz.]

There is some problem in the firestore I couldnt handle what it is also probably because of this problem I am not able to see my to do list. Thanks for helipng.

[CoDFreaken]

The V-card is simply not appearing when i try to recreate what you have done, my database registers it properly, but doesn't push it back to the v-card. Any clue?

[ankitupadhyay]

Give your markdown document as a reference

[rustambekabdusalomov]

I have poblem binding with firebase
There is one warning message in my console and I can't find how to solve it can you help me Pls...

[aphkyky]

late, but your credentials are leaked in 3:56

[kijoolee]

Hi, I work for a restaurant and I've been looking for some simple video about Vue, Vue router, Vuetify, Vuefire, and firebase authentication, so that I can make my own table booking system which customers can only create and edit the bookings they made, but managers can edit(add, delete, update, cancel...)
If you could make a video like this, that would be great and it is more practical....
Anyway, thank you for the video.