[Vuejs]-Vue.js + Firestore Cannot read property 'collection' of undefined

by

1👍

✅

So after playing with the code for a bit, I finally fixed it and also got rid of the other warnings in the process.

Updated vuefire initialization:

Vue.use(firestorePlugin)
firebase.initializeApp({
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxxxxxx.firebaseio.com",
  projectId: "xxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxxx",
  appId: "xxxxxxxxxxxx"
});

export const db = firebase.firestore()

Updated Projects.vue:

import { db } from './main'

export default {
  name: 'projects',
  data() {
    return {
      projects: [],
    }
  },
  firestore() {
    return {
      projects: db.collection('projects')
    }
  }
}

Small changes here and there eventually solved my problem, I hope this helps others that come across this problem 🙂

👤joshwcorbett

Leave a comment