Create Realtime Webapp using Vuejs and Firebase

As Qiscus promised on TechTalk #95 before, here's a written version of what we discussed on that TechTalk. We
will not go into detail why we chose Vuejs or Firebase for this project because this tutorial will be too long to
read by then. Basically, we're using both of them because of the ease of use and simplicity. During the TechTalk
we're building a real-time guestbook app where user can post their name and URL live on our web-app.

Requirement
Nodejs (https://nodejs.org/en/)
Vue-Cli (https://github.com/vuejs/vue-cli) package. If you already have npm installed you can just
type npm i -g vue-cli
Firebase (https://www.npmjs.com/package/firebase) library
Vue-Fire (https://www.npmjs.com/package/vuefire) package (vuejs firebase binding library)

Getting Started
We'll be using vuejs webpack boilerplate template.
To do this we need to open terminal then type vue init webpack vuefirebase-project
This will only work if you already have vue-cli installed on your machine
now go inside the project folder by typing cd vuefirebase-project
install all the dependencies by typing npm install
don't forget to install firebase and vuefire because the boilerplate doesn't have them by default.
Type npm install firebase vuefire -S
start the development server by typing npm run dev. Now open your browser and navigate to localhost:8080
if all goes well you'll see this screen
 To make styling easier we'll be using bootstrap css cdn on our template. Simply open ./index.html and put
this line `<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">` inside
the header tag
Navigate to src/main.js then import vuefire and tell vuejs to use it

// ./src/main.js

import Vue from 'vue'

import VueFire from 'vuefire'

import App from './App'Vue.config.productionTip = false

Vue.use(VueFire)
.
.
.

Navigate to src/App.vue
Let's start by connecting our app to firebase through javascript.
Navigate to firebase console and get our configuration. The code in the script section should look like this
by now.
 We take the configuration from fire base, then we initialize it. We're also targeting the guests node on
our firebase database.

VueFire plugin that we use on main.js file give us property of firebase which will bind our guests model
with the guests node on our firebase database. Now everytime you make changes through firebase
console it'll be reflected directly on our app.
Let's build the template for displaying our real-time data.

In the template above we're using v-for directive of vuejs to loop through our firebase database on
guests node and display it in our table row.
The double curly braces is used to render our model on each cell of the row.
Notice how we put @click event on the third cell. The @click directive add a click event listener to our
delete button, when it is clicked, it will call the method of removeGuest with the parameter of current guest
Now we need to add that method onto our script section. Just put this code snippet below
the firebase property.
...
methods: {
removeGuest(guest) {
guestRef.child(guest['.key']).remove()
}
}
...

The code snippet above will remove guest based on its unique key (see guest['.key'])
Now let's add a form to add new guest, go back to the template section and add this form
 As we can see from the template above, we bind two more models namely name and url. We need to
let vuejs know that we're using those two model. And we also need to add method of addGuest. So far,
our script section will look like this.

With that concludes our tutorial. Feel free to comment below if you have any problem implementing
any step in this tutorial.
 Here's the final product:

To get more information, visit our website https://www.qiscus.com/

Or you can visit to our blog https://blog.qiscus.com/