VueJs and Firebase together is incredibly simple.

Building a Chat App; With VueJs + Firebase

As a developer I am constantly learning. One of the latest things I’ve been reading about is firebase, and I am impressed! The possibilities are endless, but real-time data apps have never been easier. So follow along, and you’ll see that you can build a chat app with Vue and Firebase in just minutes. (No knowledge of Node, Sockets, etc required.)

The Essentials

Have Node installed.
Install Vue CLI.

Initialize Vue

In your terminal wherever you want to create this project, do the following:

vue create firebase-chat

Then you will be presented with some options. Make sure you leave Babel selected, the other options are up to you. For this tutorial, I didn’t select anything else.

cd firebase-chat
npm run serve

And you’re ready to make some things happen!

Create a Firebase Project.

Do this by going to https://console.firebase.google.com and creating a project.

Then proceed to “database” in the left side nav. And create a “Real Time Database”. Make sure you create the database is “test mode” because it will allow you to read and write to the database.