Building simple chat web app using Vue.js and Firebase

Building simple chat web app using Vue.js and Firebase

A comprehensive step by step tutorial on building simple chat web app using Vue.js and Google Firebase Realtime Database with multiple chat rooms and users

Originally published at https://www.djamware.com

In this Vue.js tutorial, we will use the existing Google Firebase Javascript SDK that can access the Firebase Realtime-database. Previously, we have created a Vue.js Firebase tutorial CRUD web app which is a simple CRUD operation to populate Firebase Firestore Data.

List of the steps:

  • Setup Google Firebase Database
  • Install Vue-CLI 3 and Create Vue.js App
  • Install and Configure the Firebase Module
  • Add Vue.js Router
  • Bootstrap-Vue Login Page
  • Bootstrap-Vue Room List & Add-Room
  • Bootstrap-Vue Chat Page
  • Run the Vue.js Firebase Realtime Chat Web App

The flow of this Vue.js Firebase chat web app is very simple.

  1. When the user goes to the Vue.js app URL it will redirect to the login page that only has a nickname as login field.
  2. After login, redirect to select chat room page which has a list of existing chat room and a button to add a new chat room.
  3. If click on the add button, it will be redirected to the add-room page with a single room name field and submit button.
  4. If click on an item of the chat room list, it will be redirected to the chat page and start to chat with other nicknames that join or enter the chat room.
  5. Chat room contains a list of messages from all users or nicknames and a button to logout from the chat room.

For more clear explanation, you can refer to this sequence diagram.

The following tools, framework, and module are required for this tutorial:

We assume that you have already installed Node.js. Make sure Node.js command line is working (on Windows) or runnable in Linux/OS X terminal.

Setup Google Firebase Database

Next, we will set up or create a new Google Firebase project that can use the realtime database. Just open your browser then go to Google Firebase Console and you will take to this page.

From that page, click "+" add project button to create a Google Firebase project then it will be redirected to this page.

After filling the project name text field which our project name is "vue-chat-app" then click continue button and it will be redirected to this page.

This time, choose to not add Firebase analytics for now then click Create Project button.

Now, you have a Google Firebase Project ready to use.

After click Continue button it will be redirected to this page.

While develope menu expanded in the left menu, choose "Create Database" then it will open this dialog.

Select "Start in test mode" then click next and it will go to the next dialog.

Select the Firebase database server location (better near you Angular server location) then click Done button. Don't forget to select or change Cloud Firestore to Realtime Database in Develop -> Database dashboard. Next, go to the Rules tab and you will see these rules values.

{
  /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
  "rules": {
    ".read": false,
    ".write": false
  }
}

 Change it to readable and writeable from everywhere for this tutorial only.

{
  /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
  "rules": {
    ".read": "auth === null",
    ".write": "auth === null"
  }
}

Click the publish button to update or save the changes. Now, the Google Firebase database is ready to use with your Vue.js chat web app.

Install Vue-CLI 3 and Create Vue.js App

Vue-CLI is standard tooling Vue.js development. It has the features out-of-the-box support for Babel, TypeScript, ESLint, PostCSS, PWA, Unit Testing & End-to-end testing, fully configurable without the need for ejecting, allows the community to build and share reusable solutions to common needs, create, develop and manage your projects through an accompanying graphical user interface, and instantly prototype new ideas with a single Vue file. To install Vue-CLI 3 type this command from the Terminal or Node command line.

sudo npm install -g @vue/cli

or

yarn global add @vue/cli

Next, check the version to make sure that you have the 3.x version of Vue-CLI.

vue --version 
3.11.0

Next, create a new Vue.js project with the name "vue-firebase-chat" by type this command.

vue create vue-firebase-chat

For now, use the default for every question that shows up in the Terminal. Next, go to the newly created folder.

cd ./vue-firebase-chat

To make sure that created Vue.js project working, type this command to run the Vue.js application.

npm run serve

or

yarn serve

You will see this page when open `http://localhost:8080/` in the browser.


Install and Configure the Firebase Module

We will use Firebase Javascript SDK that available as a Node module. For that, type this command to install the Firebase module after stop the running Vue.js app (press ctrl + c).

npm install --save firebase

Next, create a new file `Firebase.js` in the root of the project folder for Firebase configuration.

touch src/Firebase.js

Open and edit `src/Firebase.js` then add these imports of Firebase SDK module.

import * as firebase from 'firebase';

Add the constant variables of settings and Firebase configuration parameters after the imports declarations.

const config = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET"
};

 Initialize Firebase configuration settings.

firebase.initializeApp(config);

Export this file as a module by adding this line at the end.

export default firebase;

You can find or get those configuration parameters by click on the settings (gear button) -> Project Settings to get web API key and Project ID. Click Develop -> Authentication then scrolls to Authorized domain to get authDomain value. In order to get the value of storageBucket, you have to enable or start a Storage by going to Develop -> Storage.

Add Vue.js Router

As you see in the sequence diagram before the steps, we need to navigate through the required pages. So, we will create those pages manually by creating the files and folder for them.

touch src/components/Chat.vue 
touch src/components/Room.vue 
touch src/components/AddRoom.vue 
touch src/components/Login.vue

Next, install "vue-router" using Vue-CLI.

vue add router

Leave the question as default then finished the router installation. That Vue-CLI command added a new view folder that contains home and about also added a router.js file that contains the routing for that views and components. In our case, the home and about the view is not necessary, so we have to open and edit `router.js` then replace the imports to these imports.

import Vue from 'vue' 
import Router from 'vue-router' 
import Chat from './components/Chat.vue' 
import Room from './components/Room.vue' 
import AddRoom from './components/AddRoom.vue' 
import Login from './components/Login.vue'

Change the generated routes array to accommodate the last created components.

routes: [
  {
    path: '/chat/:nickname/:roomid/:roomname',
    name: 'Chat',
    component: Chat
  },
  {
    path: '/room/:nickname',
    name: 'RoomList',
    component: Room
  },
  {
    path: '/add-room',
    name: 'AddRoom',
    component: AddRoom
  },
  {
    path: '/',
    name: 'Login',
    component: Login
  }
]

 Next, remove unwanted elements from the main view by open and edit src/App.vue then make the Vue.js template like this.

 <template>
  <div id="app">
    <router-view/>
  </div>
</template>
Bootstrap-Vue Login Page

We will Bootstrap-Vue for the theme or styling the UI of the Chat Room. Using BootstrapVue we can build responsive, mobile-first projects on the web using Vue.js and the world's most popular front-end CSS library Bootstrap v4. Type this Vue-CLI command to install the bootstrap-vue module.

vue add bootstrap-vue

Next, open and edit src/components/Login.vue then add the required template that contain <b-row>, <b-col>, <b-form>, <b-form>, <b-form-group>, <b-form-input>, and <b-button>.

 <template>
  <b-row>
    <b-col cols="12">
      <h2>
        Login
      </h2>
      <b-jumbotron>
        <b-form @submit="onSubmit">
          <b-form-group>
            <b-form-input id="nickname" v-model.trim="login.nickname" placeholder="Enter your nickname"></b-form-input>
          </b-form-group>
          <b-button type="submit" variant="primary" :disabled="!login.nickname">Login</b-button>
        </b-form>
      </b-jumbotron>
    </b-col>
  </b-row>

 Add the Vue script that contains login objects and a method to submit login to redirect to Room List page with a nickname parameter.

<script>
 
import router from '../router'
 
export default {
  name: 'AddBoard',
  data () {
    return {
      login: { nickname: '' }
    }
  },
  methods: {
    onSubmit (evt) {
      evt.preventDefault()
 
      router.push({
        name: 'RoomList',
        params: { nickname: this.login.nickname }
      })
    }
  }
}
</script>

 Add a little style to clean up the view.

<style>
  .jumbotron {
    padding: 2rem;
  }
</style>
Bootstrap-Vue Room List & Add-Room

After login it will redirected to the room list. For that, open and edit src/components/Room.vue then add these bootstrap-vue template that contain <b-row>, <b-col>, <b-link> for redirect to Add Room Page, <b-list-group>, and <b-list-group-item> with iteration of room array.

 <template>
  <b-row>
    <b-col cols="12">
      <h2>
        Room List
        <b-link href="/add-room">(Add Room)</b-link>
      </h2>
      <b-list-group>
          <b-list-group-item v-for="room in rooms" :key="room.key" :to="{name: 'Chat', params: {nickname: nickname, roomid: room.key, roomname: room.roomName}}" action>
              {{room.roomName}}
          </b-list-group-item>
      </b-list-group>
    </b-col>
  </b-row>
</template>

 Add the Vue.js script that contains data of nickname, room array, error array, Firebase realtime-database reference to chatrooms document, and a method to load or get the list of room from the Firebase Realtime-Database.

<script>
 
import firebase from '../Firebase'
 
export default {
  name: 'BoardList',
  data () {
    return {
      nickname: this.$route.params.nickname,
      rooms: [],
      errors: [],
      ref: firebase.database().ref('chatrooms/')
    }
  },
  created () {
    this.ref.on('value', (snapshot) => {
      this.rooms = [];
      snapshot.forEach((doc) => {
        let item = doc.val()
        item.key = doc.key
        this.rooms.push(item)
      });
    });
  }
}
</script>

 Add a little style to clean up the view.

<style>
  .table {
    width: 96%;
    margin: 0 auto;
  }
</style>

 Next, open and edit src/components/AddRoom.vue then add the Bootstrap-Vue template that contains the required Bootstrap-vue <b-form> and other components to submit a new room.

 <template>
  <b-row>
    <b-col cols="12">
      <h2>
        Add Room
        <b-link @click="$router.go(-1)">(Room List)</b-link>
      </h2>
      <b-jumbotron>
        <b-form @submit="onSubmit">
          <b-form-group>
            <b-form-input id="roomname" v-model.trim="room.roomName" placeholder="Enter Room Name"></b-form-input>
          </b-form-group>
          <b-button type="submit" variant="primary" :disabled="!room.roomName">Save</b-button>
        </b-form>
      </b-jumbotron>
    </b-col>
  </b-row>
</template>

 Add a Vue.js script that contains Firebase realtime-database reference to chatrooms, room object, and a method to submit a new room to the Firebase realtime-database then redirect back to the Room List page.

<script>
 
import firebase from '../Firebase'
import router from '../router'
 
export default {
  name: 'AddBoard',
  data () {
    return {
      ref: firebase.database().ref('chatrooms/'),
      room: { roomName: '' }
    }
  },
  methods: {
    onSubmit (evt) {
      evt.preventDefault()
 
      let newData = this.ref.push()
      newData.set({
        roomName: this.room.roomName
      })
      router.go(-1)
      .catch((error) => {
        alert("Error adding document: ", error)
      });
    }
  }
}
</script>

 Add a little style to adjust the view.

<style>
  .jumbotron {
    padding: 2rem;
  }
</style>
Bootstrap-Vue Chat Page

Now, we will be working on the main feature of this tutorial, that is Bootstrap-vue chat page. But first, we have to install vue-chat-scroll because we want the chat conversation always scroll to the last chat message. Type this command to install it.

yarn add vue-chat-scroll --save

or

npm install -save vue-chat-scroll

Next, open and edit src/main.js then add this import.

import VueChatScroll from 'vue-chat-scroll'

Register that VueChatScroll module after the Vue config.

Vue.use(VueChatScroll)

Next, open and edit src/components/Chat.vue then add the Bootstrap-vue template that contains the list of chat messages that iterated from the chats array, exit chat link, and the send message form.

 <template>
  <b-row>
    <b-col cols="12">
      <h2>
        {{roomname}}
        <b-link @click="exitChat()">(Exit Chat)</b-link>
      </h2>
      <div class="chat-box" v-chat-scroll>
        <b-list-group>
          <b-list-group-item class="chat-item" v-for="chat in chats" :key="chat.key">
            <div class="chat-status text-center" v-if="chat.type==='join'||chat.type==='exit'">
              <span class="chat-date">{{chat.sendDate}}</span>
              <span class="chat-content-center">{{chat.message}}</span>
            </div>
            <div v-else>
              <div class="chat-message text-right" v-if="chat.user === nickname">
                <div class="right-bubble">
                  <span class="msg-name">Me</span>
                  <span class="msg-date">{{chat.sendDate}}</span>
                  <p text-wrap>{{chat.message}}</p>
                </div>
              </div>
              <div class="chat-message text-left" text-left v-if="chat.user !== nickname">
                <div class="left-bubble">
                  <span class="msg-name">{{chat.user}}</span>
                  <span class="msg-date">{{chat.sendDate}}</span>
                  <p text-wrap>{{chat.message}}</p>
                </div>
              </div>
            </div>
          </b-list-group-item>
        </b-list-group>
      </div>
      <footer class="sticky-footer">
        <b-form @submit="onSubmit">
          <b-input-group>
              <b-form-input id="message" v-model.trim="data.message" placeholder="Enter your message"></b-form-input>
              <b-button type="submit" variant="primary" :disabled="!data.message">Send</b-button>
          </b-input-group>
        </b-form>
      </footer>
    </b-col>
  </b-row>
</template>

 Automatic vue-chat-scroll implemented in the div before the list of the chat message. Next, add the Vue.js script that contains the Firebase realtime-database reference to the chats collections, required variables, array, objects, and the method to submit a new message to the Firebase realtime-database and exit chat while submitting data to Firebase.

<script>
 
import firebase from '../Firebase'
import router from '../router'
 
export default {
  name: 'Chat',
  data () {
    return {
        roomid: this.$route.params.roomid,
        roomname: this.$route.params.roomname,
        nickname: this.$route.params.nickname,
        data: { type:'', nickname:'', message:'' },
        chats: [],
        errors: [],
        offStatus: false
    }
  },
  created () {
    let joinData = firebase.database().ref('chatrooms/'+this.roomid+'/chats').push();
    joinData.set({
      type: 'join',
      user: this.nickname,
      message: this.nickname+' has joined this room.',
      sendDate: Date()
    });
    this.data.message = '';
    firebase.database().ref('chatrooms/'+this.roomid+'/chats').on('value', (snapshot) => {
      this.chats = [];
      snapshot.forEach((doc) => {
        let item = doc.val()
        item.key = doc.key
        this.chats.push(item)
      });
    });
  },
  methods: {
    onSubmit (evt) {
        evt.preventDefault()
 
        let newData = firebase.database().ref('chatrooms/'+this.roomid+'/chats').push();
        newData.set({
            type: 'newmsg',
            user: this.nickname,
            message: this.data.message,
            sendDate: Date()
        });
        this.data.message = '';
    },
    exitChat () {
      let exitData = firebase.database().ref('chatrooms/'+this.roomid+'/chats').push()
      exitData.set({
        type: 'exit',
        user: this.nickname,
        message: this.nickname+' has exited this room.',
        sendDate: Date()
      })
 
      this.offStatus = true
      router.go(-1)
    }
  }
}
</script>

 To make the chatbox more realistic view, add these CSS style codes.

<style>
  .chat-box {
    height: 500px;
    width: 100%;
    overflow: scroll;
  }
  .chat-item {
    border: none;
  }
  .chat-status {
    min-height: 49px;
  }
  .chat-status .chat-date {
    display: block;
    font-size: 10px;
    font-style: italic;
    color: #999;
    height: 15px;
    left: 10%;
    right:10%;
  }
  .chat-status .chat-content-center {
    padding: 5px 10px;
    background-color: #e1e1f7;
    border-radius: 6px;
    font-size: 12px;
    color: #555;
    height: 34px;
    left: 10%;
    right:10%;
  }
  .chat-message {
    width: 80%;
    min-height: 40px;
  }
  .chat-message .right-bubble {
    position: relative;
    background: #dcf8c6;
    border-top-left-radius: .4em;
    border-bottom-left-radius: .4em;
    border-bottom-right-radius: .4em;
    padding: 5px 10px 10px;
    left: 15%;
  }
  .chat-message .right-bubble span.msg-name {
    font-size: 12px;
    font-weight: bold;
    color: green;
    display: block;
  }
  .chat-message .right-bubble span.msg-date {
    font-size: 10px;
    display: block;
  }
  .chat-message .right-bubble:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border: 27px solid transparent;
    border-left-color: #dcf8c6;
    border-right: 0;
    border-top: 0;
    margin-top: -0.5px;
    margin-right: -27px;
  }
  .chat-message .left-bubble {
    position: relative;
    background: #efefef;
    border-top-right-radius: .4em;
    border-bottom-left-radius: .4em;
    border-bottom-right-radius: .4em;
    padding: 5px 10px 10px;
    left: 5%;
  }
  .chat-message .left-bubble span.msg-name {
    font-size: 12px;
    font-weight: bold;
    color: blue;
    display: block;
  }
  .chat-message .left-bubble span.msg-date {
    font-size: 10px;
    display: block;
  }
  .chat-message .left-bubble:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border: 27px solid transparent;
    border-right-color: #efefef;
    border-left: 0;
    border-top: 0;
    margin-top: -0.5px;
    margin-left: -27px;
  }
  footer.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: #ffffff;
    border-top: solid 1px #efefef;
  }
</style>
Run the Vue.js Firebase Realtime Chat Web App

Running the Vue.js and Firebase realtime chat web app is very simple. Just type this command in your terminal.

npm start serve

And here it is, you can test the realtime chat web app in your multiple machine or browser. You can watch this demo to find out how it works with multiple browsers.


That it's, the Vue.js Firebase Realtime Chat Web App tutorial. You can check the full source code from our GitHub.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

The Complete JavaScript Course 2019: Build Real Projects!

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Nuxt.js - Vue.js on Steroids

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

Build a Progressive Web App In VueJs

Build a CMS with Laravel and Vue

Beginner’s Guide to Vue.js

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Top Vue.js Developers in USA

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.

We, at HireFullStackDeveloperIndia, implement the right strategic approach to offer a wide variety through customized Vue.js development services to suit your requirements at most competitive prices.

Vue.js is an open-source JavaScript framework that is incredibly progressive and adoptive and majorly used to build a breathtaking user interface. Vue.js is efficient to create advanced web page applications.

Vue.js gets its strength from the flexible JavaScript library to build an enthralling user interface. As the core of Vue.js is concentrated which provides a variety of interactive components for the web and gives real-time implementation. It gives freedom to developers by giving fluidity and eases the integration process with existing projects and other libraries that enables to structure of a highly customizable application.

Vue.js is a scalable framework with a robust in-build stack that can extend itself to operate apps of any proportion. Moreover, vue.js is the best framework to seamlessly create astonishing single-page applications.

Our Vue.js developers have gained tremendous expertise by delivering services to clients worldwide over multiple industries in the area of front-end development. Our adept developers are experts in Vue development and can provide the best value-added user interfaces and web apps.

We assure our clients to have a prime user interface that reaches end-users and target the audience with the exceptional user experience across a variety of devices and platforms. Our expert team of developers serves your business to move ahead on the path of success, where your enterprise can have an advantage over others.

Here are some key benefits that you can avail when you decide to hire vue.js developers in USA from HireFullStackDeveloperIndia:

  • A team of Vue.js developers of your choice
  • 100% guaranteed client satisfaction
  • Integrity and Transparency
  • Free no-obligation quote
  • Portal development solutions
  • Interactive Dashboards over a wide array of devices
  • Vue.js music and video streaming apps
  • Flexible engagement model
  • A free project manager with your team
  • 24*7 communication with your preferred means

If you are looking to hire React Native developers in USA, then choosing HireFullStackDeveloperIndia would be the best as we offer some of the best talents when it comes to Vue.js.

Build Firestore Database CRUD Web App using Vue.js and Firebase

Build Firestore Database CRUD Web App using Vue.js and Firebase

A comprehensive step by step tutorial on build Firestore Database CRUD Web Application using Vue.js 2 and Firebase.

Originally published at https://www.djamware.com

In this tutorial, we are using standard Firebase module for Javascript. Starting from the Firebase connection to Firestore Database CRUD (Create, Read, Update, Delete) operation.

Table of Contents:

  • Setup Firebase Firestore Database
  • Install Vue-CLI 3 and Create Vue.js App
  • Install and Configure the Firebase Module
  • Add Vue.js Router
  • List of Boards using Bootstrap-Vue
  • Show Details and Delete Board using Bootstrap-Vue
  • Add Board using Bootstrap-Vue
  • Edit Board using Bootstrap-Vue
  • Run and Test Vue.js Firebase Firestore Web Application

The following tools, framework, and module are required for this tutorial:

  • Node.js (Recommended version)
  • Vue.js
  • Firebase
  • Terminal (Mac/Linux) or Node Command Line (Windows)
  • IDE or Text Editor

We assume that you have already installed Node.js. Make sure Node.js command line is working (on Windows) or runnable in Linux/OS X terminal.

Setup Firebase Firestore Database

Setup Google Firebase is very simple. Open your browser then go to Google Firebase Console and log in using your Google account.

Click the `Add Project` button, name it as you like and checks all checkboxes. Finally, click `Create Project` button then wait a few seconds and click the `Continue` button. You will be redirected to this page.

Go to Develop menu on the left menu then click `Create Database` on Cloud Firestore page.

Choose `Start in test mode` then click `Enabled` button.

Click `Add Collection` button to add the new collection for this tutorial. Fill collection ID (ours: 'boards') then click next. Add the required fields then click finish the wizard.

Now, the Firebase Firestore Database is ready to access. Make sure that your iOS and Android app match with the configuration files (json/plist). You can get the configuration parameters in the Authentication side menu then you will see the Web Setup button on the top right of the screen.

Install Vue-CLI 3 and Create Vue.js App

Vue CLI is a full system for rapid Vue.js development with the current latest version is 3. To install Vue-CLI 3 type this command from the Terminal or Node command line.

sudo npm install -g @vue/cli

or

yarn global add @vue/cli

Next, check the version to make sure that you have the 3.x version of Vue-CLI.

vue --version

Next, create a new Vue.js project by type this command.

vue create vue-firestore

For now, use the default for every question that shows up in the Terminal. Next, go to the newly created folder.

cd ./vue-firestore

To make sure that created Vue.js project working, type this command to run the Vue.js application.

npm run serve

or

yarn serve

You will see this page when open `http://localhost:8080/` in the browser.


Install and Configure the Firebase Module

We use Firebase module to access the Firebase Firestore Database. For that, type this command to install the module.

npm install --save firebase

Next, create a new file `Firebase.js` in the root of the project folder for Firebase configuration.

touch src/Firebase.js

Open and edit src/Firebase.js then replace all codes with this.

 import * as firebase from 'firebase';

import firestore from 'firebase/firestore'

 

const settings = {timestampsInSnapshots: true};

 

const config = {

  apiKey: "YOUR_API_KEY",

  authDomain: "YOUR_AUTH_DOMAIN",

  databaseURL: "YOUR_DATABASE_URL",

  projectId: "YOUR_PROJECT_ID",

  storageBucket: "YOUR_STORAGE_BUCKET"

};

firebase.initializeApp(config);

 

firebase.firestore().settings(settings);

 

export default firebase;

You can find or get those configuration parameters by click on Web Setup button in the page authentication of Firebase Console.

Add Vue.js Router

By default vue-router is not installed. For that, type this command to install that module.

npm install --save vue-router

To register or create routes for the whole application navigation, create a router folder and index.js file.

mkdir src/router
touch src/router/index.js

Open and edit src/router/index.js then add these imports of VueRouter and the required created components.

import VueRouter from 'vue-router'
import BoardList from '@/components/BoardList'
import ShowBoard from '@/components/ShowBoard'
import AddBoard from '@/components/AddBoard'
import EditBoard from '@/components/EditBoard'

Add the router to each component or page.

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'BoardList',
      component: BoardList
    },
    {
      path: '/show-board/:id',
      name: 'ShowBoard',
      component: ShowBoard
    },
    {
      path: '/add-board',
      name: 'AddBoard',
      component: AddBoard
    },
    {
      path: '/edit-board/:id',
      name: 'EditBoard',
      component: EditBoard
    }
  ]
})

Add Vue files for above-registered components or pages.

touch src/components/BoardList.vue
touch src/components/ShowBoard.vue
touch src/components/AddBoard.vue
touch src/components/EditBoard.vue

Finally, add or register this router file to src/main.js by adding these imports of VueRouter and router.

import VueRouter from 'vue-router'
import router from './router'

Register the Vue-Router after Vue.config.

Vue.use(VueRouter)

Modify new Vue to be like this.

 new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
List of Boards using Bootstrap-Vue

Before create or show data to the views, we have to add Bootstrap-Vue. Type this command to install the module.

npm i bootstrap-vue

Next, open and edit src/main.js then add these imports of BootstrapVue and Bootstrap stylesheet.

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Add this line after Vue.config.

Vue.use(BootstrapVue);

Now, open and edit src/components/BoardList.vue then add these lines of codes that contain Bootstrap-Vue templates and a method to get the list of data from Firebase.

 <template>
  <b-row>
    <b-col cols="12">
      <h2>
        Board List
        <b-link href="#/add-board">(Add Board)</b-link>
      </h2>
      <b-table striped hover :items="boards" :fields="fields">
        <template slot="actions" scope="row">
          <b-btn size="sm" @click.stop="details(row.item)">Details</b-btn>
        </template>
      </b-table>
    </b-col>
  </b-row>
</template>
 
<script>
 
import firebase from '../Firebase'
import router from '../router'
 
export default {
  name: 'BoardList',
  data () {
    return {
      fields: {
        title: { label: 'Title', sortable: true, 'class': 'text-left' },
        actions: { label: 'Action', 'class': 'text-center' }
      },
      boards: [],
      errors: [],
      ref: firebase.firestore().collection('boards'),
    }
  },
  created () {
    this.ref.onSnapshot((querySnapshot) => {
      this.boards = [];
      querySnapshot.forEach((doc) => {
        this.boards.push({
          key: doc.id,
          title: doc.data().title
        });
      });
    });
  },
  methods: {
    details (board) {
      router.push({ name: 'ShowBoard', params: { id: board.key }})
    }
  }
}
</script>
 
<style>
  .table {
    width: 96%;
    margin: 0 auto;
  }
</style>
Show Details and Delete Board using Bootstrap-Vue

Open and edit src/components/ShowBoard.vue then add these lines of codes that contain Bootstrap-Vue template components and a method to get single data from Firebase.

 <template>
  <b-row>
    <b-col cols="12">
      <h2>
        Edit Board
        <b-link href="#/">(Board List)</b-link>
      </h2>
      <b-jumbotron>
        <template slot="header">
          {{board.title}}
        </template>
        <template slot="lead">
          Title: {{board.title}}<br>
          Description: {{board.description}}<br>
          Author: {{board.author}}<br>
        </template>
        <hr class="my-4">
        <b-btn class="edit-btn" variant="success" @click.stop="editboard(key)">Edit</b-btn>
        <b-btn variant="danger" @click.stop="deleteboard(key)">Delete</b-btn>
      </b-jumbotron>
    </b-col>
  </b-row>
</template>
 
<script>
 
import firebase from '../Firebase'
import router from '../router'
 
export default {
  name: 'ShowBoard',
  data () {
    return {
      key: '',
      board: {}
    }
  },
  created () {
    const ref = firebase.firestore().collection('boards').doc(this.$route.params.id);
    ref.get().then((doc) => {
      if (doc.exists) {
        this.key = doc.id;
        this.board = doc.data();
      } else {
        alert("No such document!");
      }
    });
  },
  methods: {
    editboard (id) {
      router.push({
        name: 'EditBoard',
        params: { id: id }
      })
    },
    deleteboard (id) {
      firebase.firestore().collection('boards').doc(id).delete().then(() => {
        router.push({
          name: 'BoardList'
        })
      }).catch((error) => {
        alert("Error removing document: ", error);
      });
    }
  }
}
</script>
 
<style>
  .jumbotron {
    padding: 2rem;
  }
  .edit-btn {
    margin-right: 20px;
    width: 70px;
  }
</style>
Add Board using Bootstrap-Vue

Open and edit src/components/AddBoard.vue then add these lines of codes that contain Bootstrap-Vue template components and the method to post data to Firebase.

 <template>
  <b-row>
    <b-col cols="12">
      <h2>
        Add Board
        <b-link href="#/">(Board List)</b-link>
      </h2>
      <b-jumbotron>
        <b-form @submit="onSubmit">
          <b-form-group id="fieldsetHorizontal"
                    horizontal
                    :label-cols="4"
                    breakpoint="md"
                    label="Enter Title">
            <b-form-input id="title" v-model.trim="board.title"></b-form-input>
          </b-form-group>
          <b-form-group id="fieldsetHorizontal"
                    horizontal
                    :label-cols="4"
                    breakpoint="md"
                    label="Enter Description">
              <b-form-textarea id="description"
                         v-model="board.description"
                         placeholder="Enter something"
                         :rows="2"
                         :max-rows="6">{{board.description}}</b-form-textarea>
          </b-form-group>
          <b-form-group id="fieldsetHorizontal"
                    horizontal
                    :label-cols="4"
                    breakpoint="md"
                    label="Enter Author">
            <b-form-input id="author" v-model.trim="board.author"></b-form-input>
          </b-form-group>
          <b-button type="submit" variant="primary">Save</b-button>
        </b-form>
      </b-jumbotron>
    </b-col>
  </b-row>
</template>
 
<script>
 
import firebase from '../Firebase'
import router from '../router'
 
export default {
  name: 'AddBoard',
  data () {
    return {
      ref: firebase.firestore().collection('boards'),
      board: {}
    }
  },
  methods: {
    onSubmit (evt) {
      evt.preventDefault()
 
      this.ref.add(this.board).then((docRef) => {
        this.board.title = ''
        this.board.description = ''
        this.board.author = ''
        router.push({
          name: 'BoardList'
        })
      })
      .catch((error) => {
        alert("Error adding document: ", error);
      });
    }
  }
}
</script>
 
<style>
  .jumbotron {
    padding: 2rem;
  }
</style>
 Edit Board using Bootstrap-Vue

Open and edit src/components/EditBoard.vue then add these lines of codes that contain Bootstrap-Vue template components and Vue method to get or post data from or to Firebase.

<template>
  <b-row>
    <b-col cols="12">
      <h2>
        Edit Board
        <router-link :to="{ name: 'ShowBoard', params: { id: key } }">(Show Board)</router-link>
      </h2>
      <b-jumbotron>
        <b-form @submit="onSubmit">
          <b-form-group id="fieldsetHorizontal"
                    horizontal
                    :label-cols="4"
                    breakpoint="md"
                    label="Enter Title">
            <b-form-input id="title" v-model.trim="board.title"></b-form-input>
          </b-form-group>
          <b-form-group id="fieldsetHorizontal"
                    horizontal
                    :label-cols="4"
                    breakpoint="md"
                    label="Enter Description">
              <b-form-textarea id="description"
                         v-model="board.description"
                         placeholder="Enter something"
                         :rows="2"
                         :max-rows="6">{{board.description}}</b-form-textarea>
          </b-form-group>
          <b-form-group id="fieldsetHorizontal"
                    horizontal
                    :label-cols="4"
                    breakpoint="md"
                    label="Enter Author">
            <b-form-input id="author" v-model.trim="board.author"></b-form-input>
          </b-form-group>
          <b-button type="submit" variant="primary">Update</b-button>
        </b-form>
      </b-jumbotron>
    </b-col>
  </b-row>
</template>
 
<script>
 
import firebase from '../Firebase'
import router from '../router'
 
export default {
  name: 'EditBoard',
  data () {
    return {
      key: this.$route.params.id,
      board: {}
    }
  },
  created () {
    const ref = firebase.firestore().collection('boards').doc(this.$route.params.id);
    ref.get().then((doc) => {
      if (doc.exists) {
        this.board = doc.data();
      } else {
        alert("No such document!");
      }
    });
  },
  methods: {
    onSubmit (evt) {
      evt.preventDefault()
      const updateRef = firebase.firestore().collection('boards').doc(this.$route.params.id);
      updateRef.set(this.board).then((docRef) => {
        this.key = ''
        this.board.title = ''
        this.board.description = ''
        this.board.author = ''
        router.push({ name: 'ShowBoard', params: { id: this.$route.params.id }})
      })
      .catch((error) => {
        alert("Error adding document: ", error);
      });
    }
  }
}
</script>
 
<style>
  .jumbotron {
    padding: 2rem;
  }
</style>
Run and Test Vue.js Firebase Firestore Web Application

This time to test all complete the Vue.js and Firebase Firestore Database Stack CRUD web application. Type this command to run again this web application.

yarn serve


And here the application looks like, you can test all CRUD functionality.

That it's, the Vue.js Firebase Tutorial: Build Firestore CRUD Web Application. You can find the working source code from our GitHub.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

The Complete JavaScript Course 2019: Build Real Projects!

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Nuxt.js - Vue.js on Steroids

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

Build a Progressive Web App In VueJs

Build a CMS with Laravel and Vue

Beginner’s Guide to Vue.js