0

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!

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Amos Glenn
  • 1
  • Have you tried using the [default port for Firestore as specified on the docs](https://firebase.google.com/docs/emulator-suite/install_and_configure#port_configuration): (8080 for Firestore)? – Daniel Ocando Feb 15 '21 at 11:23
  • The documentation for the emulator specifies that it's available [from particular versions of the Client SDK](https://firebase.google.com/docs/emulator-suite/install_and_configure#emulator_sdk_integrations) (in the specific case of Web will be [firebase](https://www.npmjs.com/package/firebase) >= 8.0.0). I see that vuexfire has the following peer dependency ["firebase": ">=4.0.0"](https://github.com/vuejs/vuefire/blob/06b400fdb0f242659c87405e06fde322c01cf73e/packages/vuexfire/package.json#L43). – Daniel Ocando Feb 15 '21 at 11:24
  • I wonder if that requirement could cause issues with the emulator. Let me know if changing ports and carefully following the [docs](https://firebase.google.com/docs/emulator-suite/connect_firestore#web) can do the trick. – Daniel Ocando Feb 15 '21 at 11:24
  • Switching ports didn't help. I switched the Firestore emulator back to 8080 and the vue-cli dev server port to 8081 (firebase emulators won't start if the port isn't available). The Vue app isn't connecting to any firestore when I change `emulating = true` and set `db.useEmulator('localhost', 8080)`. Still the same error. – Amos Glenn Feb 15 '21 at 17:37
  • I also tried the system described at https://stackoverflow.com/questions/60536897/how-to-tell-a-vue-app-to-use-firebase-emulator without success. – Amos Glenn Feb 15 '21 at 18:40
  • I'll recommend you to open an issue on the [library itself](https://github.com/vuejs/vuefire) or in defect with the [emulator](https://github.com/firebase/firebase-tools-ui) (although don't expect a prompt answer for such issues). – Daniel Ocando Feb 19 '21 at 11:01

1 Answers1

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))
}),
user1586675
  • 31
  • 3