AppDividend
Latest Code Tutorials

Vue Firebase Example Tutorial

Vue Firebase Tutorial

2 453

Get real time updates directly on you device, subscribe now.

Vue Firebase Example Tutorial is the today’s topic. Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google in 2014.  Firebase is the 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. In this tutorial, we will see how we can connect our vue application to the Firebase backend service. Let us get started.

Vue Firebase Example Tutorial

First, we need to install Vue js application in our local. So let us do that. 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, then try to run the command as an administrator.

Now, we need to generate the necessary scaffold. So type the following command. Mine project name is vuefire, but it will confuse you that is why you will create a different name like the following.

vue create vuefirebaseexample

 

Vue Firebase Example Tutorial

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 the 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>

Okay, so that is done. Now, create a new Vue component inside 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/.

Related Posts
1 of 10

Bootstrap 4 Forms

 

 

Step 4: Connect Vue to the Firebase.

Go to Firebase and login to your console account.

Create one project.

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

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

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

Of course, you have the config values based on your account. 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 src folder, create one folder called config. 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 when we need to perform any database operations, we can connect that component to the database directly.

Step 5: Add the coins to the firebase.

Now, 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.

Now, after that, whatever coins, we are adding, that will store on the firebase with reference of coins.

Save the file and try to add any crypto coins.

You see that alert pops up and we can verify on the Firebase console as well.

how to add data to the firebase

 

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

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

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

2 Comments
  1. Calvin Lee says

    Very nice article!

    But, there are many WARN messages when I run “npm install vuefire firebase –save”, including:

    npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0

    npm WARN rm not removing C:MyDvlpVuevue-pj-02node_modules.binjest.cmd as it wasn’t installed by C:MyDvlpVuevue-pj-02node_modulesjest
    npm WARN rm not removing C:MyDvlpVuevue-pj-02node_modules.binjest as it wasn’t installed by C:MyDvlpVuevue-pj-02node_modulesjest

    Do you have those WARNs in your environment?

    1. Krunal says

      Nope, I do not have any.

Leave A Reply

Your email address will not be published.