Vue.js 2 & Firebase – Building Real Time Single Page Web Applications

#1 Online Course: Vue JS 2 – The Complete Guide (

Vue.js 2 & Firebase – Building Real Time Single Page Web Applications

Firebase is a mobile and web application platform supporting developers with various tools and services to build high-quality app. A central feature of Firebase is the realtime database. By using the Firebase API the realtime database can be used to store and snyc data across multiple clients and platforms. The Firebase website is available at:

Firebase is a perfect match for Vue.js. The realtime database can be used as a backend for the view layer which is implemented with Vue.js 2. To integrate Firebase services with your Vue.js 2 application The VueFire library can be used.

In this video you’ll learn how to set up a Firebase realtime database and bind to real time data in your Vue application by using this library step-by-step.

This is a tutorial
Support us with just one cup of coffee:

Check out our ebooks on

* Angular 2 – A Practical Introduction to the new Web Development Platform

* Ionic 2 – A Practical Introduction To Hybrid Mobile Apps Development

Night Owl by Broke For Free is licensed under a Creative Commons Attribution License.

DISCLAIMER: This video and description contains affiliate links, which means that if you click on one of the product links, we’ll receive a small commission. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!

Related Posts
lit-HTML (Chrome Dev Summit 2017)

lit-HTML is a next-generation templating library that combines powerful web platform primitives – JavaScript tagged template literals and HTML templates Read more

The Truth about app development – how coding has changed in 2020.

Ex-Google TechLead explains why apps and websites are so hard to succeed. Check out for unlimited access to the Read more

How to use Cordova to create an Android app

This example is for JavaScript beginners. We take a simple JavaScript web app that estimates paint cost and create an Read more

Display notifications – Progressive Web App Training

What's the best way to display popup notifications on mobile and desktop. This video shows how to use the Notification Read more

27 thoughts on “Vue.js 2 & Firebase – Building Real Time Single Page Web Applications”

  1. There is a new option in Firebase "Cloud Firebase" and "Real-time Database". This tutorial is for "real-time DB" it doesn't work with the Cloud option. An update with edit inputs and authentication would be much appreciated. Thanx, great work!

  2. Thank you very much for the video.

    Question: what causes you to update on a page, when you enter or delete data from others? Are they websockets? Thank you

  3. So I just got past the init stages (no code written yet), and I've got 170MB of 'stuff' in node_modules – for a simple app which reads and writes text to a DB. 170MB…

    Is this what 'modern' web development is…? I'm so confused.

  4. Great Video !
    I added validation to the addBook() function. They're many ways to to that but this is how I did it.
    addBook: function() {
    if(this.newBook.title != ' '){
    if( != ' '){
    if(this.newBook.url != ' '){

  5. hello, thanks noticed you put the complete code in one app.vue file.. how about splitting up the "add book" and "books list" in to separate components.. .i would like to learn how to do that. what do i need to import and export., what is needed to be in main.js? how about simple routing?

  6. Great tutorial as usual :). I hope to do part 2 of this tutorial. Adding components, router, auth firebase. It will be great idea. Who agrees?!

  7. Really liked this video. Awesome. I am able to fully create this app. Some problem came in syntax errors but finally created it after careful inspection. Thank you so much 🙂

  8. Hey! I'm kinda new to programing, and found this was really helpfull and easy to adapt. Can you help me to create an edit function to edit the data on database? ty

  9. Everything worked nicely … except when adding the toastr bit at the end 🙁 Running the suggested jquery install via npm doesn't seem to fix it either

    This is the error message in the terminal

    ERROR Failed to compile with 1 errors
    This dependency was not found:

    * jquery in ./~/toastr/toastr.js

    To install it, you can run: npm install –save jquery
    > Listening at http://localhost:8080

  10. Thank you so so much! You're such a nice teacher. I know how to use VueFire now 😀

    Anyway, you have not mention any code to update the database yet 😀

  11. Awesome tutorial, keep up the great work !!

    Would you be able to create a tutorial on authentication using firebase for VueJS?


Leave a Comment