CODEWITHSUNDEEP
firebasevue.jsvuex
timomue
timomue

Reputation: 317

VueJS + VUEX + Firebase: Where To Hook Up Firebase?

I would like to integrate Firebase in my Vue.JS app.

I wonder WHERE to put the references to Firebase.

Upvotes: 15

Views: 7078

Answers (1)

Vamsi Krishna
Vamsi Krishna

Reputation: 31362

To install firebase as a dependency in your project cd into your project directory and run the following command in the command line

npm install --save firebase

Now in your main.js file add this

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)
})
  • you can also add your firebase credentials in an external js file and import it in the main.js file as follows:

firebase-config.js

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

Now in your main.js do as follows

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)
})

  • adding firebase to the Vue.prototype allows usage of firebase in your vue components by using this.$firebase

  • if you don't want this behavior you can just initialize firebase using firebase.initializeApp(config);

  • now coming to your vuex store you can just import the firebase module as below

    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()
        }
    }
});

Credits to @umang for suggesting to add the firebase global namespace to the Vue.prototype instead of the firebase app instance.

Upvotes: 43

Related Questions