How to Use Vue with Firebase

Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google in 2014.  

Firebase is a mobile platform that helps you quickly establish high-quality web and mobile apps, grow your user base, and earn more money.  

Vue.js is an open-source JavaScript framework for building user interfaces. Integration into projects that use other JavaScript libraries is made easy with Vue because it is designed to be incrementally adoptable.

Vue Firebase

We need to install Vue js application in our local. So let us do that. Then, we use Vue CLI to generate the scaffold of our application.

Step 1: Install Vue CLI.

Go to your terminal and hit the following command.

npm install -g @vue/cli
         or
yarn global add @vue/cli

If you face any error, try running the command as an administrator.

Now, we need to generate the necessary scaffold. So type the following command.

The mine project name is vuefire, but it will confuse you, which is why you will create a different name like the following.

vue create vuefirebaseexample

Step 2: Install vuefire for firebase vue binding.

Go into the project.

cd vuefirebaseexample

Install the vuefire library using the following command.

yarn add vuefire firebase

or

npm install vuefire firebase --save

Open the project in your editor.

code .

Step 3: Create a basic form.

First, we need to download bootstrap 4 for basic styling. So let us do that first.

yarn add bootstrap

Now, include the bootstrap in the src  >>  App.vue file.

// App.vue

<style lang="css">
  @import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
</style>

That is done. Create a new Vue component inside the src  >> components folder called CoinForm.vue.

// CoinForm.vue

<template>
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h3>Add Coin</h3>
            </div>
            <div class="card-body">
                <form v-on:submit.prevent="addCoin">
                    <div class="form-group">
                        <label>Name:</label>
                        <input type="text" class="form-control"/>
                    </div>
                    <div class="form-group">
                        <label>Price:</label>
                        <input type="text" class="form-control"/>
                    </div>
                    <div class="form-group">
                        <input type="submit" class="btn btn-primary" value="Add Coin"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: 'CoinForm',
}
</script>

Import this component inside App.vue file. 

// App.vue

<template>
  <div id="app">
    <CoinForm />
  </div>
</template>

<script>
import CoinForm from './components/CoinForm.vue'

export default {
  name: 'app',
  components: {
    CoinForm
  }
}
</script>
<style lang="css">
  @import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
</style>

Start the development server with the following command.

npm run serve

It will open the browser at this URL: http://localhost:8080/.

Step 4: Connect Vue to the Firebase.

Go to Firebase and log in to your console account.

Create one project.

Please enable reading and writing in test mode for our application; otherwise, you will not be able to store any data on the Firebase.

After that, you need to create a database for the web application, and then you will get your configuration object like the one below.

let config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
};

Of course, you have the config values based on your account. So you need to copy that.

Open the main.js file and add the following code.

// main.js

import VueFire from 'vuefire'

Vue.use(VueFire)

Okay, now, inside the src folder, create one folder called config. Then, inside that folder, create one file called db.js.

// db.js

import Firebase from 'firebase'
 let config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
  };
let app = Firebase.initializeApp(config)
export const db = app.database()

I have created this separate file because we can connect that component to the database directly when we need to perform any database operations.

Step 5: Add the coins to the Firebase.

Create the method to add the coin. I have put the whole code.

// CoinForm.vue

<template>
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h3>Add Coin</h3>
            </div>
            <div class="card-body">
                <form v-on:submit.prevent="addCoin">
                    <div class="form-group">
                        <label>Name:</label>
                        <input type="text" class="form-control" v-model="newCoin.name"/>
                    </div>
                    <div class="form-group">
                        <label>Price:</label>
                        <input type="text" class="form-control" v-model="newCoin.price"/>
                    </div>
                    <div class="form-group">
                        <input type="submit" class="btn btn-primary" value="Add Coin"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
import { db } from '../config/db';

export default {
  name: 'CoinForm',
  firebase: {
    coins: db.ref('coins')
  },
  data () {
    return {
      newCoin: {
          name: '',
          price: ''
      }
    }
  },
  methods: {
      addCoin() {
        this.$firebaseRefs.coins.push({
            name: this.newCoin.name,
            price: this.newCoin.price
        })
        this.newCoin.name = '';
        this.newCoin.price = '';
        alert("Succeessfully added")
      }
    }
}
</script>

Imported the db from the db.js file and then created the reference of coins.

Afterward, whatever coins we add will be stored on the Firebase concerning coins. So, save the file and try to add any crypto coins.

You see that alert pops up, which we can verify on the Firebase console.

This is how you can connect and add the data to the firebase application.

In a future post, I will show you how to make the Vue Firebase CRUD application.

That is it for the Vue Firebase Example Tutorial. Thanks for taking it.