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")?
It gives you realtime functionality on your vue app without having to code the bindings yourself. I actually like to use VuexFire to keep my Vuex store in sync with my database.
@@DiligentDev So when you install it, it works behind the scene? As I didn't notice you had to manually call any methods or extra binding. Perhaps I missed something. My next question is the Firestore cost for the realtime binding. Say you have 500 users on a page with Data table. When using VueFire, and data data changes on Firestore, wouldn't 500 new fetches made to Firestore server with 500 reads, which basically Firebase will charge you for Reads, CPU, Bandwidth and etc.? In using SDK, you have to manually opt for that realtime update and knowing you will get charged for it. Am I right? Thanks for the reply!
@@BenHayat The firestore property you get in the Vue Options API is what does all the heavy lifting. Firestore costs are based on reads, writes, and deletes. They don't factor in CPU or bandwidth. You get a set number for free every day. I've never seen the opt-in for real-time capabilities. I will say that you should be careful not to over fetch. I would implement paging and queries where you can. Also, don't loop through data to aggregate anything. Keep a property in your collection/document for aggregates. I would code to minimize operations. Generally, if you're getting a large bill from Firebase, that means you either have a successful app (good problem) or you did something wrong. You can find the pricing here: firebase.google.com/pricing.
@@DiligentDev Awesome reply: >>I've never seen the opt-in for real-time capabilities. Be sure to watch this video and the link's content. The video did clarify my concern on the charges, as Firebase SDK uses local caching. But a great read and video. firebase.google.com/docs/firestore/query-data/listen#web
@@BenHayat Thank you for sharing! I just watched the video and I didn't know about the caching. Very good to know that I'll only be charged for the documents that change.
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?
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.
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.
Oh buddy, this tutorial is quick and comprehensive ... I love it! Thank you!
Keep making more videos like this, please.
Glad you enjoyed it. I’ll keep them coming.
Fantastic little app for Vue beginners. And the best thing, it's fast!
Excellent tutorial!!! Absolutely subbed and going to watch more from you. Can you go more into depth on CRUD operations with firebase/firestore?
Fantastic tutorial, very clean.
Wow, finally a good tutorial. Thank you very much sir.
Awesome tuto, thanks boss 🔥
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")?
It gives you realtime functionality on your vue app without having to code the bindings yourself. I actually like to use VuexFire to keep my Vuex store in sync with my database.
@@DiligentDev
So when you install it, it works behind the scene? As I didn't notice you had to manually call any methods or extra binding. Perhaps I missed something.
My next question is the Firestore cost for the realtime binding.
Say you have 500 users on a page with Data table. When using VueFire, and data data changes on Firestore, wouldn't 500 new fetches made to Firestore server with 500 reads, which basically Firebase will charge you for Reads, CPU, Bandwidth and etc.?
In using SDK, you have to manually opt for that realtime update and knowing you will get charged for it.
Am I right?
Thanks for the reply!
@@BenHayat The firestore property you get in the Vue Options API is what does all the heavy lifting. Firestore costs are based on reads, writes, and deletes. They don't factor in CPU or bandwidth. You get a set number for free every day.
I've never seen the opt-in for real-time capabilities. I will say that you should be careful not to over fetch. I would implement paging and queries where you can. Also, don't loop through data to aggregate anything. Keep a property in your collection/document for aggregates. I would code to minimize operations.
Generally, if you're getting a large bill from Firebase, that means you either have a successful app (good problem) or you did something wrong.
You can find the pricing here: firebase.google.com/pricing.
@@DiligentDev
Awesome reply:
>>I've never seen the opt-in for real-time capabilities.
Be sure to watch this video and the link's content.
The video did clarify my concern on the charges, as Firebase SDK uses local caching. But a great read and video.
firebase.google.com/docs/firestore/query-data/listen#web
@@BenHayat Thank you for sharing! I just watched the video and I didn't know about the caching. Very good to know that I'll only be charged for the documents that change.
For this todo app how we can create the markdown document please guide about markdown document
Note vuefire isnt yet compatible with vue 3 or firebase version 9
awesome bro
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?
Sounds like a vuefire issue, but I wont be able to help without any code. Publish a gist and share it.
@@DiligentDev Am not able to read data from firebase. Please help
Git: github.com/chiranthkothari/vuefire-movies
a typo in source, v-cols should be v-col
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.
What exactly is the error?
@@DiligentDev i solved it thanks :)
What was the solution? Think I’,m struggling with similar
@@BispensGipsGebis Found the solution?
@@chiranthjain Didn’t find it, sorry
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...
What is the error?
@@DiligentDev My project cannot bind to firebase
I’m assuming this is a VueFire error. Have you made you Firestore rules public to test those aren’t blocking you?
late, but your credentials are leaked in 3:56
can you write one for vue 3 as well?
I'd have to check if Vuefire is compatible with Vue 3. The major changes have to do with the composition API, but you don't have to use it.
I tried it today, but at the moment Vuefire is not (yet) compatible with Vue 3. I guess you'll have to wait, or use it in a Vue 2-project
@@DiligentDev Actually vuetify is not compatible either with Vue3.
@@passivecryptoearnings3605 Yeah, not yet. You can view their roadmap here: vuetifyjs.com/en/introduction/roadmap/
Give your markdown document as a reference
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.
Definitely a good idea for a project!