Vuefire firestore() function not running to bind my data

Question

I'm running into this issue that I can't figure out. I got VueFire to work on another app I had written, but for some reason it's just not binding in my current one. Below is the code on the page that calls the firestore() function, as well as the main.js if that helps to see the initialization. Why isn't firestore() running?

Page calling firestore():

HTML

<table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="user in users">
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
      </tr>
    </tbody>
  </table>

JS

import firebase from 'firebase'

export default {
  data() {
    return {
      users: [],
    }
  },
  firestore() {
    return {
      users: firebase.firestore().collection('users'),
    }
  }
}

And the main.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import App from './App'
import router from './router'
import firebase from 'firebase'
import 'vuetify/dist/vuetify.min.css'
import VueFire from 'vuefire'

Vue.config.productionTip = false

Vue.use(Vuetify)
Vue.use(VueFire)

var config = {
    boiler plate initialization copied from Firebase console
 };

const firebaseApp = firebase.initializeApp(config);
firebaseApp.firestore().settings({ timestampsInSnapshots: true })

/* eslint-disable no-new */
const unsubscribe = firebase.auth().onAuthStateChanged(user => {
  new Vue({
   el: '#app',
   router,
   render: h => h(App)
 })
 unsubscribe() 
})

Thank you!!

I was not able to figure out exactly what was causing it so just used a workaround that didn't involve this functionality. Not ideal so if you have any idea what might be causing it to not work any insight would be great, thank you! — hyperionloop, Aug 05 '18 at 21:21

score 0 · Answer 1 · answered Sep 18 '18 at 21:00

Try this.

import { db } from "../main";

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

And the main.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import App from './App'
import router from './router'
import 'vuetify/dist/vuetify.min.css'
import firebase from "firebase";
import VueFire from 'vuefire'
import "firebase/firestore";

Vue.config.productionTip = false

Vue.use(Vuetify)
Vue.use(VueFire)

var config = {
    boiler plate initialization copied from Firebase console
 };

firebase.initializeApp(config);

export const db = firebase.firestore();
const settings = { timestampsInSnapshots: true };
db.settings(settings);

/* eslint-disable no-new */
const unsubscribe = firebase.auth().onAuthStateChanged(user => {
  new Vue({
   el: '#app',
   router,
   render: h => h(App)
 })
 unsubscribe() 
})

Vuefire firestore() function not running to bind my data

1 Answers1