We know that Firebase is a mobile and webapplication development platform. Many app developers

started using Firebase in their project from when it is released. To install Firebase as a dependency in

your project some steps are there.

First install Firebase using npm install command.

npm install --save firebase

In the main.js file add the below lines of code.

import Vue from 'vue'
import App from './App.vue'
import * as firebase from 'firebase'
import { store } from './store/store'
const config = {
apiKey: "xxxxxxx",
authDomain: "xxxxxxx",
databaseURL: "xxxxxxx",
storageBucket: "xxxxxxxx",
messagingSenderId: "xxxxxxx"
};
firebase.initializeApp(config);
Vue.prototype.$firebase = firebase;
new Vue({
el: '#app',
store,
render: h => h(App)
})

Alternatively you can add the firebase credentials in an external js file and then import it in the main.js

file as shown below.

Config.js

export const config = {
apiKey: "xxxxxxx",
authDomain: "xxxxxxx",
databaseURL: "xxxxxxx",
storageBucket: "xxxxxxxx",
messagingSenderId: "xxxxxxx"
};

main.js

import Vue from 'vue'
import App from './App.vue'
import * as firebase from 'firebase'
import { store } from './store/store'
import { config } from './firebase-config'
firebase.initializeApp(config);
Vue.prototype.$firebase = firebase;
new Vue({
el: '#app',
store,
render: h => h(App)
})

Now initialize your firebase .

firebase.initializeApp(config);

If you want to use this.$firebase in your vue components add firebase to

Vue.prototype. For vuex store just import the firbase modules.

import Vue from 'vue'
import Vuex from 'vuex'
import * as firebase from 'firebase'
Vue.use(Vuex);
export const store = new Vuex.Store({
state:{},
mutations:{},
actions:{
myFirebaseAction: ({commit}) => {
//you can use firebase like this
var ref = firebase.database().ref()
}
}
});