Quasar and vuefire

meesterKurt

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!

jrhopkins83

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.

Reto

@jrhopkins83
Hi i’m interested in your setup for vuexfire.
Could you show it?

pd76

me too, thanks.

dobbel

@pd76

Here’s an article about Quasar Firebase and Vuexfire:
https://dev.to/quasar/to-the-stars-with-quasar-firebase-user-profile-319l

Here’s the repo of a demo app( from the article):
https://github.com/quasarframework/firebase-sample-apps/tree/master/data/profile