How to use firebase push notification using laravel and vue js - vuejs2

Question

I have try to make send push notification to admin user when a customer order a product.
When an admin user logged into dashboard will shown a prompt and if user subscribe the prompt user will get notification when a customer make a order in front end.I have used laravel and vue for backend.(Vue inside the laravel application).I have no idea how to prompt shown when user logged in .I have created a account in firebase and get keys.
All tutorial are based on independent vue js.In my case vue js inside the laravel app.
Where i put code which is get from firebase.?
i have tried with
//app.js
import firebase from "firebase/app";
import { initializeApp } from 'firebase/app';
import '#firebase/messaging';
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxx.firebaseapp.com",
projectId: "xxxxxxxxx-push",
storageBucket: "xxxxxxx.appspot.com",
messagingSenderId: "xxxxxxxxxxx",
appId: "xxxxxxxxxx:c1bae0304ce23d6eae3ccd",
measurementId: "xxxxxxx"
};
firebase.initializeApp(firebaseConfig);
// Using FCM Messaging
const messaging = firebase.messaging();
messaging.usePublicVapidKey("xxxxxxxxxxx");
// Get FCM Token
messaging.getToken().then((currentToken) => {
if (currentToken) {
console.log("Token: " + currentToken);
} else {
// Show permission request.
console.log('No Instance ID token available. Request permission to generate one.');
}
}).catch((err) => {
console.log('An error occurred while retrieving token. ', err);
});
Uncaught TypeError: firebase.messaging is not a function
at Module../resources/js/app.js

Answer 1

The issue is related with the version of Firebase you have installed. I think you have "firebase": "^9.X.X"
You are using the Web version 8 api. You can install v.8 if you like, but I wouldn't recommend it. V9 offers great features like tree shaking.
Here's a solution for firebase v9 :
First things first, I hope your firebaseConfig data is a dummy data, if not, you'll have to create a new firebase project because the data you just published here are sensitive and should be kept hidden.
To answer your question :
You need to import getMessaging in order to interact with FCM :
import { getMessaging, getToken } from "firebase/messaging";
Make sure your initializeApp() is inside a variable:
const app = initializeApp(firebaseConfig);
In order to initialize the messaging service :
const messaging = getMessaging(app);
Retrieving the token :
getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
if (currentToken) {
// Send the token to your server and update the UI if necessary
// ...
} else {
// Show permission request UI
console.log('No registration token available. Request permission to generate one.');
// ...
}
}).catch((err) => {
console.log('An error occurred while retrieving token. ', err);
// ...
});
For more info : Firebase docs