Skip to content

Instantly share code, notes, and snippets.

@rascoop
Created January 24, 2019 20:02
Show Gist options
  • Save rascoop/74f171180e49a34f2562bda3800c34e1 to your computer and use it in GitHub Desktop.
Save rascoop/74f171180e49a34f2562bda3800c34e1 to your computer and use it in GitHub Desktop.
Firebase & Vuex
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()
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment