Vue.js + Firestore Cannot read property 'collection' of undefined

Question

I've been playing with Vue.js and Firestore lately and I've found an awesome plugin to make my life easier, and though it does involve less code to link to my firestore database, it's been making my life very difficult with undefined errors.

What I have is very simple:

App.vue:

<template>
  <div id="app">
    <Projects></Projects>
  </div>
</template>

<script>

import Projects from './Projects';
export default {
  name: 'app',

  components: {
    Projects
  },
  data() {
    return {}
  }
}
</script>
<style></style>

Projects.vue:

<template>
  <div id="projects">
    <h1>Hi</h1>
    <p v-for="project in projects" :key="project.project_id">{{ project.title }}</p>
  </div>
</template>

<script>

import db from './main'

export default {
  name: 'projects',
  data() {
    return {
      projects: [],
    }
  },
  firestore: {
    projects: db.collection('projects')
  }
}
</script>
<style></style>

Main.js:

import 'babel-polyfill';
import Vue from 'vue'
import App from './App.vue'

// Firebase Imports
import Firebase from 'firebase/app'
import 'firebase/firestore'
import { firestorePlugin } from 'vuefire'

// Use Plugins
Vue.use(firestorePlugin)

// Initialize Firebase Configuration
var firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxxxxxx.firebaseio.com",
  projectId: "xxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxxx",
  appId: "xxxxxxxxxxxx"
}

const firebaseApp = Firebase.initializeApp(firebaseConfig)
export const db = firebaseApp.firestore()

new Vue({
  el: '#app',
  render: h => h(App)
})

When I run this application I get the following error in my console:

Uncaught TypeError: Cannot read property 'collection' of undefined
    at eval (Projects.vue?8816:20)
    at Object.<anonymous> (build.js:1640)
    at __webpack_require__ (build.js:679)
    at fn (build.js:89)
    at eval (Projects.vue?eb12:1)
    at Object.<anonymous> (build.js:3128)
    at __webpack_require__ (build.js:679)
    at fn (build.js:89)
    at eval (145:1)
    at Object.<anonymous> (build.js:1633)

If anyone has experience with this and can shed some light on why I'm a big dummy in my code, that would be very much appreciated!

Answer 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 :)