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 ...
Collapse
 
devsmk profile image
S M Khalilullah

Thanks a lot!

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

Collapse
 
abdullahch profile image
M.Abdullah Ch

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
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sdenman profile image
SimonD

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

Collapse
 
devsmk profile image
S M Khalilullah

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

  1. npm uninstall firebase
  2. npm install firebase@8.10.0
Collapse
 
vbanditv profile image
Fima Taf

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

Collapse
 
shalemperez profile image
Shalem Pérez

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

Collapse
 
vbanditv profile image
Fima Taf

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

Collapse
 
tabrani_sadek_bfcc4cb66d1 profile image
tabrani sadek

Thanks a lot!
register(${process.env.BASE_URL}firebase-messaging-sw.js)

Collapse
 
twt_aliso profile image
AliSo

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

Collapse
 
vbanditv profile image
Fima Taf

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);
    });
  }
...
Enter fullscreen mode Exit fullscreen mode
Collapse
 
watsonc profile image
Watson-Halu • 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?

Collapse
 
vbanditv profile image
Fima Taf

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.

Collapse
 
izazkhattak profile image
izazkhattak

Step3, firebase.js code throw an error like this, why?

Collapse
 
asadbr profile image
Asad • Edited

Image description

i am getting this error when i get vapidKey

i used step 3

Collapse
 
adamfilk profile image
Aung Chan Oo

How to subscribe to specific topics with this approach bro? Thanks in advance.

Collapse
 
flosegueda profile image
Moises Flores

it is necessary to import something to use messaging.getToken in Step 4 ?

Collapse
 
devsmk profile image
S M Khalilullah

Yes, you need to import firebaseMessaging from the src/firebase.js file. Then you can use it like firebaseMessaging.getToken()