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
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()