Quasar and vuefire



  • I would like to use firebase and vuefire in my project.
    But for some reason, i can’t find a way to do the setup right.
    I made a bootfile like this

    import firebase from 'firebase/app'
    import 'firebase/firestore'
    import 'firebase/auth'
    
    import Vue from 'vue'
    import {
      firestorePlugin
    } from 'vuefire'
    
    Vue.use(firestorePlugin)
    var firebaseConfig = {
      ....
    };
    // Initialize Firebase
    let firebaseApp = firebase.initializeApp(firebaseConfig);
    let firebaseAuth = firebaseApp.auth()
    const db = firebaseApp.firestore()
    
    export {
      firebaseAuth,
      db
    }
    
    

    In the index.vue i’ve put, just for test purpose

    <template>
      <q-page>
        <h1>Testpage</h1>
       
        <div>
        <q-btn @click="loggen">Log all data</q-btn>
        </div>
      </q-page>
    </template>
    
    <script>
    import { db } from "boot/firebase";
    
    export default {
      name: "PageIndex",
      methods: {
        loggen() {
          console.log("fblog", this.test);
        }
      },
      firestore: {
        test: db.collection("TestCollectie")
      }
    };
    </script>
    

    But this gives me an error like
    boot_firebase__WEBPACK_IMPORTED_MODULE_0__.db.collection is not a function

    Is there someone who can point me in the right direction? What am i doing wrong?
    Or does anyone has a demo-repo with quasar and vuefire where i can find an answer?

    Any help is appreciated!



  • Hi, I’m using Vuexfire successfully in my project as I’m using it to maintain a Vuex state rather than on an individual component.

    Let me know if you’d like to see that set up.


Log in to reply