DEV Community

How to add FCM (Firebase Cloud Messaging) to VueJS

Fima Taf on March 08, 2021

Lately I had a task to implement FCM (Firebase Cloud Messaging) to a vue application I am working on, and I've found out that there are few guides ...

Read full post

S M Khalilullah • Apr 30 '22

Thanks a lot!

I could be able to complete all the steps successfully following this article.

M.Abdullah Ch • Jan 19 '22

I am getting an error

ERROR  Failed to compile with 1 error                                         1:17:23 AM

This dependency was not found:

* https://www.gstatic.com/firebasejs/9.6.3/firebase-app.js in ./node_modules/firebase/firebase-messaging.js

To install it, you can run: npm install --save https://www.gstatic.com/firebasejs/9.6.3/firebase-app.js

SimonD • Apr 2 '22

Hi,
I'm getting this too - on build.
Do you remember how you fixed it - assuming you did :)
Thanks

S M Khalilullah • Apr 30 '22

This is due to a firebase npm package version 9 bug.
Solution: steps-

npm uninstall firebase
npm install firebase@8.10.0

Fima Taf • Jan 23 '22

Are you trying to install firebase npm package? If you do, then what is the version ?

Shalem Pérez • Aug 19 '21

How can i get access to the generated "currentToken" in vue ?

Fima Taf • Aug 28 '21

Hey,
You can call the getToken() function again - you will get the registered token.

Watson-Halu • May 25 '21 • Edited

Hello,
Is it necessary to put firebase.js in a specific folder on step 3?
Can you give me the advice to tell me should put this file (firebase.js) in which folder?

Fima Taf • May 25 '21

Hey, you can place the firebase.js file where-ever you want, you can even place the content of the file inside main.js and delete firebase.js.

AliSo • Aug 28 '21

Hi Fima!
How to post currentToken to some API by axios?
I cannot use import statement outside vue module!

Fima Taf • Aug 28 '21

Hey,
I guess you are trying to send the request from the service worker and not from the app itself, as far as I know you can't access axios inside service workers - but you can use fetch instead:

//firebase-messaging-sw.js
...
messaging.getToken({ vapidKey: <KEY> }).then((currentToken) => {
if (currentToken) {
    fetch('http://some.api', {
      method: 'GET',
    })
    .then(function (data) {
      console.log('Request Succeeded: ', data);
    })
    .catch(function (error) {
      console.log('Request Failed: ', error);
    });
  }
...