Quasar: How to integrate Google Firestore or vue-firestore into my Quasar App?

[heliosnarcissus]

Just want to know where to put my firestore config and the necesary firestore scripts inside my quasar project for me to be able to use it.

Please help. I'm using Firestore as my database.

[miketrebilcock]

Look at the axios plugin and use it as a template to create a firebase one. You can include any firebase auth or routing in there. This works for me

import firebase from 'firebase'

const config = {
  apiKey: 'XXXXXXX',
  authDomain: 'XXXX.firebaseapp.com',
  databaseURL: 'https://XXXXX.firebaseio.com',
  projectId: 'XXXX',
  storageBucket: 'XXXX.appspot.com',
  messagingSenderId: 'XXXXXXX'
}
firebase.initializeApp(config)

export default ({ app, router, store, Vue }) => {
  Vue.use(VueFire)
  Vue.prototype.$firebase = firebase

  firebase.auth().onAuthStateChanged(user => {
   // Any logic you might want run when the user state changes
  })

  router.beforeEach((to, from, next) => {
    let currentUser = firebase.auth().currentUser
    let requiresAuth = to.matched.some(record => record.meta.requiresAuth)
    console.log('to', to, 'from', from)
    if (requiresAuth && !currentUser && to.path !== '/login') {
      console.log('Needs to be logged in .. redirecting to login')
      next('login')
    }
    next()
  })
})

you can then access firebase directly from any component with

this.$firebase

or firestore

this.$firebase.firestore()

The documentation mentions using plugins - When to use app plugins

[heliosnarcissus]

Oh wow, thanks @miketrebilcock I'll be trying this for sure. I was actually looking at the axios file moment ago. What I did before I read this was to create a 'firestore.js' file - just imitating 'axios.js' file.

[arelguatno]

I am the way.

[rstoenescu]

Hi, Please use Discord or forum for questions. Thanks.