How to implement Firebase Cloud Messaging (FCM) with Nuxt.js

Step 1) Install dependencies

npm install firebasenpm install @nuxtjs/firebase

Step 2) Create a file serviceWorker.js on your project's root folder.

self.addEventListener('push', function (e) {data = e.data.json();  var options = {    body: data.notification.body,    icon: data.notification.icon,    vibrate: [100, 50, 100],    data: {    dateOfArrival: Date.now(),    primaryKey: '2'  },};

Step 3) Config your nuxt.config.js as follows.

Add this line to the top of your file.

const fs = require('fs')

Update your modules array with firebase credentials.

[  '@nuxtjs/firebase',  {    config: {      apiKey: "<yourKey>",      authDomain: "<yourAuthDomain>",      projectId: "<yourProjectId>",      storageBucket: "<yourStorageBucket>",      messagingSenderId: "<yourMessagingSenderId>",      appId: "<yourAppId>",      measurementId: ",<yourMeasurementId>"    },    onFirebaseHosting: false,    services: {      messaging: {        createServiceWorker: true,        fcmPublicVapidKey: '<yourFCMPublicVapidKey>',        inject: fs.readFileSync('./serviceWorker.js')      }    }  }]

Step 4 > Finally.. to your index.js or layout file.

async mounted() {  const currentToken = await this.$fire.messaging.getToken()  const data = JSON.stringify({    notification: {      title: 'firebase',      body: 'firebase is awesome',      click_action: 'http://localhost:3000/',      icon: 'http://localhost:3000/assets/images/brand-logo.png'    },     to: currentToken  })  const config = {    method: 'post',    url: 'https://fcm.googleapis.com/fcm/send',    headers: {       'Content-Type': 'application/json',       'Authorization': 'key=<yourServerKey>'    },    data  };  const response = await axios(config)  this.$fire.messaging.onMessage((payload) => {    console.info('Message received: ', payload)  })  this.$fire.messaging.onTokenRefresh(async () => {    const refreshToken = await this.$fire.messaging.getToken()    console.log('Token Refreshed',refreshToken)  })}

For more details, to understand the steps, you can visit this article.

you can check the Nuxt Module Nuxt Firebase https://firebase.nuxtjs.org

the documentation is very good https://firebase.nuxtjs.org/service-options/messaging

Once you have installed @nuxtjs/firebase module and insert following code into your nuxt.config.js where you can get those data from firebase console. I placed them as a dotenv module because it is easier to manage configuration templates for different projects.

 firebase: {    config: {      apiKey: dotenv.parsed.apiKey,      authDomain: dotenv.parsed.authDomain,      databaseURL: dotenv.parsed.databaseURL,      projectId: dotenv.parsed.projectId,      storageBucket: dotenv.parsed.storageBucket,      messagingSenderId: dotenv.parsed.messagingSenderId,      appId: dotenv.parsed.appId,      measurementId: dotenv.parsed.measurementId    },    onFirebaseHosting: false,    services: {     messaging: {        createServiceWorker: true,        fcmPublicVapidKey: dotenv.parsed.vapidKey // OPTIONAL : Sets vapid key for FCM after initialization      }

Once you have implemented it, the module will generate service workers by itself and you can view them on your inspect element console.

All done and said,

In your vuex store, just call this.$fire.messaging.getToken() to ask users for permission to receive notification.

You can initiate your receiving message with this function below where you call this.$fire.messaging.getToken()

 messaging.onMessage(function (payload) {  context.dispatch('yourDesireDispatchFunction', payload) })