CODEWITHSUNDEEP
firebasevue.jsfirebase-authentication
Philip Seyfi
Philip Seyfi

Reputation: 969

this.$firebase is undefined

I'm building my first Vue.js app, trying to use vuex with vuexfire.

//main.js
import firebase from 'firebase';

...

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

...

firebase.auth().onAuthStateChanged(() => {
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    store,
    router,
    render: h => h(App),
    created() {
      this.$store.dispatch('setDealsRef');
    },
  });
});

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth && !currentUser) {
    next('/signin');
  } else if (requiresAuth && currentUser) {
    next();
  } else {
    next();
  }
});

And:

//store/index.js
import Vue from 'vue';
import Vue from 'vue';
import Vuex from 'vuex';
import { firebaseMutations } from 'vuexfire';

...

Vue.use(Vuex);

const db = this.$firebase.firestore();
const dealsRef = db.collection('deals');

And:

//store/mutations.js
export default {
  SET_USER(state) {
    state.user = this.$firebase.auth().currentUser;
  },
...
}

This complies OK, but throws TypeError: this.$firebase is undefined[Learn More] in the console.

Any idea what I'm doing wrong? I think I've read every relevant tutorial and StackOverflow questions, and tried everything.

Upvotes: 1

Views: 369

Answers (2)

Philip Seyfi
Philip Seyfi

Reputation: 969

I think I solved the problem:

  1. Moving firebase initialization to store.js
  2. Changing firebase.auth().onAuthStateChanged(() => { to Vue.prototype.firebase.auth().onAuthStateChanged(() => { in main.js
  3. Importing firebase as: import firebase from '@firebase/app'; import '@firebase/firestore';

Upvotes: 0

acdcjunior
acdcjunior

Reputation: 135862

When you do:

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

You add $firebase to the Vue instance. So for

this.$firebase

to work, the this should be a Vue insteance. In other words, that line must execute inside a Vue method/hook/computed/etc.

And the code you show, doesn't do that:

const db = this.$firebase.firestore();

in the code above, the this is the outer context. (Probably is window.)

So for it to work outside a Vue instance, you have to do:

const db = Vue.prototype.$firebase.firestore();

Provided the line above executes after (in time/order) the line where you initialize the $firebase.

Upvotes: 3

Related Questions