Create Realtime Webapp Using Vuejs and Firebase

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 `` 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/