[Vuejs]-Import firebase.firestore() returns undefined

by

3👍

✅

the problem is that you need to import a few dependencies separately… this is a good safe way:

import firebase from "firebase/app";
require('firebase/firestore')
require('firebase/auth')

const config = {
    apiKey: "XXXXXX",
    authDomain: "XXXXX",
    databaseURL: "XXXXX",
    projectId: "XXXXXXX",
    storageBucket: "XXXXXX",
    messagingSenderId: "XXXXXXX",
    appId: "XXXXX"
};

firebase.initializeApp(config);

export const db = firebase.firestore();

export const auth = firebase.auth();

then your components can import em like this:

import firebase from 'firebase/app'
import { db, auth } from "./firebase" // <--- or wherever the config file is
export default {
  methods: {
    signIn() {
      const provider = new firebase.auth.GoogleAuthProvider();
       auth
        .signInWithPopup(provider)
        .then(result => {
          const malakas = {
            userId: result.user.uid,
            email: result.user.email,
            displayName: result.user.displayName,
            photoURL: result.user.photoURL
          };

          db.collection("malakes")
            .doc(result.user.uid)
            .set(spreadOparatorTest, { merge: true });

        })
        .catch(err => console.log(err));
    }
  }
};

Hope this helps!

👤andresmijares

Leave a comment