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!

Don't worry about `apiKey` and other config elements being shared publicly: it is not a threat if you set up correct Security Rules.See https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public/37484053#37484053 — Renaud Tarnec, Mar 24 '20 at 21:47
It appears that you have posted sensitive/private information. Please reset your passwords and/or revoke API keys and tokens, as they are considered compromised when posted on the internet. — Samuel Liew, Apr 04 '20 at 01:50
@SamuelLiew It's been a few weeks since I changed it to not show that information — joshwcorbett, Apr 04 '20 at 07:05

score 1 · Accepted Answer · answered Mar 25 '20 at 00:55

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

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

1 Answers1