Learn how to set up FCM Push Notifications for your NuxtJs/Vuejs project

Step 1

To begin, create your nuxt app using the command

npx create-nuxt-app <your-app-name>

Step 2

Next, install firebase by running npm install firebase and @nuxt/firebase with npm install @nuxt/firebase

Step 3

Create your Firebase project by following these steps:

• Access the Firebase console and create a new project https://i.sstatic.net/FGqRQ.png

• Name your project https://i.sstatic.net/z9TLI.png

• Optionally enable Google Analytics and click on create

https://i.sstatic.net/nBhnf.png

-Grab a cup of coffee while the project sets up ☕

• Make sure to copy the configuration details displayed on the page for later use

https://i.sstatic.net/ujEtN.png

• You will now be redirected to the homepage of your Firebase project as shown in the image below

https://i.sstatic.net/WnzUh.png

• Now return to your project setup

Step 4

In your nuxt.config.js, add the following configurations

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/firebase',    
  ],
  // Firebase FCM setup

  firebase: {
    lazy: false,
    config: {
      apiKey: <apiKey>,
      authDomain: <authDomain>,
      projectId: <projectId>,
      storageBucket: <storageBucket>,
      messagingSenderId: <messagingSenderId>,
      appId: <appId>,
      measurementId: <measurementId>,
      databaseURL: <databaseURL>,
    },
    onFirebaseHosting: false,
    services: {
      messaging: true,
    }
  },


  messaging: {
    createServiceWorker: true,
    actions: [
      {
        action: 'goHome',
        url: 'https://localhost:3000'
      }
    ],
    fcmPublicVapidKey: <vapidKey> 
  },

Obtain your vapidKey by navigating to Project Settings on the Firebase console and selecting Cloud Messaging. Generate the Key Pair and get your vapidKey as shown in the image below https://i.sstatic.net/y3zAU.png

Copy and paste this key into your nuxt.config.js

Step 5

In the static folder at the root of your project, create a file named firebase-messaging-sw.js. Insert the provided configs as demonstrated below

importScripts('https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.7/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing the generated config
var firebaseConfig = {
      apiKey: <apiKey>,
      authDomain: <authDomain>,
      projectId: <projectId>,
      storageBucket: <storageBucket>,
      messagingSenderId: <messagingSenderId>,
      appId: <appId>,
      measurementId: <measurementId>,
      databaseURL: <databaseURL>,
};

firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function (payload) {
  console.log('Received background message ', payload);

  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Step 6

Configure your index.vue as follows

<template>
  <div>
    <h1>Get Notified</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listenersStarted: false,
      idToken: "",
    };
  },
  mounted() {
    this.startListeners();
  },
  methods: {
    // FCM NOTIFICATION FUNCTIONS
    async startListeners() {
      await this.startOnMessageListener();
      await this.startTokenRefreshListener();
      await this.requestPermission();
      await this.getIdToken();
      this.listenersStarted = true;
    },
    startOnMessageListener() {
      try {
        this.$fire.messaging.onMessage((payload) => {
          console.info("Message received : ", payload);
          console.log(payload.notification.body);
        });
      } catch (e) {
        console.error("Error : ", e);
      }
    },
    startTokenRefreshListener() {
      try {
        this.$fire.messaging.onTokenRefresh(async () => {
          try {
            await this.$fire.messaging.getToken();
          } catch (e) {
            console.error("Error : ", e);
          }
        });
      } catch (e) {
        console.error("Error : ", e);
      }
    },
    async requestPermission() {
      try {
        const permission = await Notification.requestPermission();
        console.log("GIVEN notify perms");
        console.log(permission);
      } catch (e) {
        console.error("Error : ", e);
      }
    },
    async getIdToken() {
      try {
        this.idToken = await this.$fire.messaging.getToken();
        console.log("TOKEN ID FOR this browser");
        console.log(this.idToken);
      } catch (e) {
        console.error("Error : ", e);
      }
    },
  },
};
</script>

Step 7

Run npm run dev , check your console to see if notification display permissions have been granted. Allow notifications if prompted.

Step 8

Head over to Cloud Messaging on your Firebase dashboard under the Engage menu. Click on Send your first message to compose the content of your notification and select your app as the target user. You should then receive a notification on your browser like shown in the image below

https://i.sstatic.net/Wjn82.png