Nuxt Setup Firebase Functions and Test With Emulator

February 23, 2021

Nuxt.js Setup

Setup Firebase for Nuxt.js.

Edit nuxt.config.js to allow functions to access emulator.

export default {
  modules: [
    '@nuxtjs/firebase',
  ],
  firebase: {
    config: { ... },
    services: {
      functions: {
        location: 'us-central1',
        emulatorHost: 'http://localhost',
        emulatorPort: 5001,
      }
    }
  }
}

Call the firebase cloud function.

<script>
export default {
  methods: {
    async callHello() {
      const hello = this.$fire.functions.httpsCallable('hello');
      const result = await hello({name: 'Desmond'})
      console.log(result.data)
    }
  },
  mounted() {
    callHello()
  }
}
</script>

Firebase Cloud Functions

Setup Firebase Project with Functions.

Edit functions/index.js

const functions = require('firebase-functions');

exports.hello = functions.https.onRequest(async (request, response) => {
  const name = request.query.name;
  response.send(`Hello ${name}`)
})

Test

In firebase project, start emulator.

firebase emulator:start

In nuxt project, start dev.

npm run dev
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.