Firebase - Vue | Basic setup doesn't retrieve data

user_9803391 0
Viewed 281

I run into this problem, I've been trying to get Vue to retrieve at least the very basic setup from firebase. It doesn't. I've followed various routes and nothing worked, so maybe I'm missing out on something, maybe in plain sight.

I don't have any errors in the console and everything seems to work fine, apart from the fact that nothing is retrieved. Network connections don't seem to retrieve any response that may be associated with the db. Here is a screengrab from firebase, maybe I misunderstood firebase and the setup:

https://ibb.co/fPTsQL

// Main.js 

/* eslint-disable semi */
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';
import VueFire from 'vuefire';

Vue.use(VueFire);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

//App.vue

<template>
  <div id="app">
    <p>This will render</p>

    <div v-for="message in messages" :key="message.text"> <!-- This will NOT -->
    <h4>{{ message.title }}</h4>
    <p>{{ message.text }}</p>
    <p>{{ message.timestamp }}</p>
</div>
  </div>
</template>

<script>
import firebase from 'firebase';

  var config = {
    apiKey: "IN THE CODE I HAVE A WORKING API KEY",
    authDomain: "vuemymessage.firebaseapp.com",
    databaseURL: "https://vuemymessage.firebaseio.com",
    projectId: "vuemymessage",
    storageBucket: "vuemymessage.appspot.com",
    messagingSenderId: "204332593971",
    timestampsInSnapshots: true
  };
  let app = firebase.initializeApp(config);

  let db = firebase.firestore();

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

<style>
#app {
}
</style>
firebase vue.js javascript
1 Answers

You're trying to setup firebase on a component, to be honest I'm not sure if that's the reason why it's failing but I've never seen it like that.

I always do it like this

// firebase.js

import * as firebase from 'firebase'
import 'firebase/firestore'

import config from './.firebaseconfig'

firebase.initializeApp(config)

const db = firebase.firestore()
export const rooms = db.collection('rooms')
export const sortedRoomsByCreatedDate = db.collection('rooms').orderBy('createdAt')

Notice you're missing the import 'firebase/firestore' line, this might be the problem. However I'd strongly recommend you to init firebase in its own file and have all of your references in one place.

of course my main.js has an import to the file above import './firebase'

And this is how I use the reference on my component

<script>
import firebase from 'firebase'
import { sortedRoomsByCreatedDate } from '../firebase'

export default {
  data () {
    return {
      sortedRoomsByCreatedDate: []
    }
  },
  firestore () {
    return {
      sortedRoomsByCreatedDate
    }
  }
}
</script>

Let me know if that works for you, and if it doesn't let me know so we can work this out

user_92971700
Related