VueJS + VUEX + Firebase: where to connect Firebase?

Question

I would like to integrate Firebase into my Vue.JS application.

I am wondering where to add links in Firebase.

Answer 1

To set firebase as a dependency in a project cdin the project directory and run the following command at a command prompt

npm install --save firebase

Now in the 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"
  };

Vue.prototype.$firebase = firebase.initializeApp(config);

new Vue({
  el: '#app',
  store,
  render: h => h(App)
}) 

• you can also add your firebase credentials to an external js file and import it into 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 the following:

import Vue from 'vue'
import App from './App.vue'
import * as firebase from 'firebase'
import { store } from './store/store'
import { config } from './firebase-config'


Vue.prototype.$firebase = firebase.initializeApp(config);

new Vue({
  el: '#app',
  store,
  render: h => h(App)
}) 

• firebase Vue.prototype firebase vue this.$firebase

• , firebase, firebase.initializeApp(config);

• vuex, firebase

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