[Vuejs]-Can't add firebase in component in Vue js

by

0👍

You’re not exporting anything in your firebase.js. So when you do import firebase from "../firebase" in our login.vue, the code is imported, but firebase doesn’t get any value. That then leads to the error message when you try to access firebase in your code.

The solution is to export the variables from your firebase.js that you want to use in the rest of your app. As shown in the Github link Renaud provided, you can do that with for example:

//firebase.js
// Your web app's Firebase configuration
  var firebaseConfig = {
     ...
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
  export {
    analytics: firebase.analytics(),
    auth: firebase.auth()
  }

Or, my personal preference:

//firebase.js
// Your web app's Firebase configuration
  var firebaseConfig = {
     ...
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
  export default firebase;

Leave a comment