I recently set up a Vue App with the Vuefire plugin. Here is an example of my main.js file, following the documentation provided at: :
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { firestorePlugin } from 'vuefire'
Vue.config.productionTip = false;
Vue.use(firestorePlugin);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Additionally, I have another file called firebase.js structured like this:
import firebase from "firebase";
const config = {
apiKey: "XXXXXX",
authDomain: "XXXXX",
databaseURL: "XXXXX",
projectId: "XXXXXXX",
storageBucket: "XXXXXX",
messagingSenderId: "XXXXXXX",
appId: "XXXXX"
};
firebase.initializeApp(config);
export const db = firebase.firestore();
Lastly, here is a snippet from my home component:
<template>
<div>
<button @click="signIn">Log in with Google</button>
</div>
</template>
<script>
import firebase from "firebase";
import db from "@/firebase"
export default {
methods: {
signIn() {
const provider = new firebase.auth.GoogleAuthProvider();
firebase
.auth()
.signInWithPopup(provider)
.then(result => {
const userDetails = {
userId: result.user.uid,
email: result.user.email,
displayName: result.user.displayName,
photoURL: result.user.photoURL
};
db.collection("users")
.doc(result.user.uid)
.set(userDetails, { merge: true });
})
.catch(err => console.log(err));
}
}
};
</script>
<style lang="scss" scoped>
</style>
An issue I encountered was when trying to use db.collection(...), I received the error:
TypeError: Cannot read property 'collection' of undefined
I found that changing db.collection(...) to
firebase.firestore().collection(...)