vuexfire not working with Firebase Emulators

Question

I'm using vuexfire to connect my vue/vuex app to Firebase Cloud Firestore. It works fine when actually connected to Firebase. It doesn't work when using the Firebase emulators.

Is there a specific way that the Firebase emulator needs to be connected to allow Vuexfire to connect?

What mostly works is

vue-cli-service serve

and then opening a new terminal and running

firebase emulators:start --import=./saved-data --export-on-exit

And I changed the settings in firebase.json to include

"emulators": {
    "firestore": {
      "port": 8081
    },

to prevent any conflict between the firestore emulator and the vue-cli dev server.

But the console is giving me this error:

Uncaught (in promise) FirebaseError: 
false for 'get' @ L6

Here's the firebase initialization:

firebase.initializeApp(firebaseConfig)
const auth = firebase.auth()
const db = firebase.firestore()
const func = firebase.functions()

const emulating = true

if (emulating) {
  func.useEmulator('localhost', 5001)
  //auth.useEmulator('http://localhost:9099/')
  db.useEmulator('localhost', 8081)
}

And the Vuex code that (I think) is causing the error:

bindProfile: firestoreAction(({ bindFirestoreRef, state }) => {
  const pid = state.user.uid
  console.log('Binding profile...')
  return bindFirestoreRef('profile', db.collection('profiles').doc(pid))
}),

Has anyone had success using Vuexfire with the Firebase emulators?

Thanks!

Answer 1

for me it worked by calling ' db.useEmulator('localhost', 8081)' just before bindFirestoreRef

i.e.

bindProfile: firestoreAction(({ bindFirestoreRef, state }) => {
  const pid = state.user.uid
  console.log('Binding profile...')
db.useEmulator('localhost', 8081) // dev mode
  return bindFirestoreRef('profile', db.collection('profiles').doc(pid))
}),