Can retrieve a FCM token

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "fcm-listener-1"
+  }
+}

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "core-js": "^3.3.2",
+    "firebase": "^7.5.0",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
     "vuex": "^3.0.1"

src/App.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
+<!--    <div id="nav">-->
+<!--      <router-link to="/">Home</router-link> |-->
+<!--      <router-link to="/about">About</router-link>-->
+<!--    </div>-->
     <router-view/>
   </div>
 </template>

src/components/Chat.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="hello">
+        <h1>Chat</h1>
+    </div>
+</template>
+
+<script>
+    import firebase from 'firebase';
+    import "firebase/messaging";
+
+    firebase.initializeApp();
+
+    const messaging = firebase.messaging();
+    messaging.usePublicVapidKey();
+
+    export default {
+        name: 'Chat',
+        props: {
+            msg: String
+        },
+      methods: {
+          onFCMTokenReceived: function(token) {
+            if (token) {
+              //sendTokenToServer(currentToken);
+              //updateUIForPushEnabled(currentToken);
+              console.log('token', token);
+            } else {
+              // Show permission request.
+              console.log('Unable to retrieve token - check permissions');
+              // Show permission UI.
+              //updateUIForPushPermissionRequired();
+              //setTokenSentToServer(false);
+            }
+          },
+        getFCMToken: function() {
+          messaging.getToken()
+                  .then(currentToken => this.onFCMTokenReceived(currentToken))
+                  .catch((err) => console.log('An error occurred while retrieving token. ', err));
+        }
+      },
+        mounted() {
+          Notification.requestPermission().then(permission => {
+            if (permission === 'granted') {
+              console.log('Notification permission granted.');
+
+              this.getFCMToken();
+
+              messaging.onTokenRefresh(() => this.getFCMToken());
+            } else {
+              console.log('Unable to get permission to notify.');
+            }
+          });
+        }
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+    h3 {
+        margin: 40px 0 0;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    li {
+        display: inline-block;
+        margin: 0 10px;
+    }
+
+    a {
+        color: #42b983;
+    }
+</style>

src/views/Home.vue

@@ -1,18 +1,17 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <Chat/>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+import Chat from '@/components/Chat.vue'
 
 export default {
   name: 'home',
   components: {
-    HelloWorld
+    Chat
   }
 }
 </script>