exchange/resources/assets/js/components/Navbar.vue

<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container">
      <router-link :to="{ name: user ? 'home' : 'welcome' }" class="navbar-brand">
        {{ appName }}
      </router-link>

      <template v-if="user">
            <el-dropdown trigger="click" align="right">
              <el-badge :value="bellBadge > 0 ? bellBadge : ''" class="item">
                <el-button icon="el-icon-bell" circle ></el-button>
              </el-badge>
              <el-dropdown-menu slot="dropdown">
                <div id="notification">
                  <div v-for="item in notification" :key="item">
                    <a v-on:click.prevent='readNotification(item.id);navigateTo(item.link)'>
                      <el-dropdown-item>
                        <b v-if="item.is_read == 0">
                          {{item.detail}}
                        </b>
                        <span v-else >
                          {{item.detail}}
                        </span>
                        <br/>
                        <span class="opacity80">
                          {{item.time_interval}}
                        </span>
                      </el-dropdown-item>
                    </a>
                  </div>
                </div>
                <el-button v-if="pagination.next_page_url != null" id="notification-load-more" v-on:click='fetchPaginateBooking(pagination.next_page_url)'>Load more</el-button>
                <div v-else id="notification-load-more"></div>
              </el-dropdown-menu>
            </el-dropdown>
        </template>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false">
        <span class="navbar-toggler-icon"/>
      </button>

      <div id="navbarToggler" class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto">
          <locale-dropdown/>
        </ul>

        <ul class="navbar-nav ml-auto">
          <!--Authenticated -->
          <template v-if="user">
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle text-dark"
               href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <img :src="user.photo_url" class="rounded-circle profile-photo mr-1">
              {{ user.name }}
            </a>
            <div class="dropdown-menu">
              <router-link :to="{ name: 'settings.profile' }" class="dropdown-item pl-3">
                <fa icon="cog" fixed-width/>
                {{ $t('settings') }}
              </router-link>

              <div class="dropdown-divider"/>
              <a href="#" class="dropdown-item pl-3" @click.prevent="logout">
                <fa icon="sign-out-alt" fixed-width/>
                {{ $t('logout') }}
              </a>
            </div>
          </li>
          </template>
          <!-- Guest -->
          <template v-else>
            <li class="nav-item">
              <router-link :to="{ name: 'login' }" class="nav-link" active-class="active">
                {{ $t('login') }}
              </router-link>
            </li>
            <li class="nav-item">
              <router-link :to="{ name: 'register' }" class="nav-link" active-class="active">
                {{ $t('register') }}
              </router-link>
            </li>
          </template>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script>
import { mapGetters } from 'vuex'
import LocaleDropdown from './LocaleDropdown'
import axios from 'axios'
import Echo from "laravel-echo"
import Pusher from "pusher-js"

export default {
  components: {
    LocaleDropdown
  },

  data: () => ({
    appName: window.config.appName,
    notification:[],
    //loadingNotification:false,
    bellBadge : 0,
    unread_message_length:0,
    url: '/api/notification/user',
    pagination: [],
  }),
  mounted () {
    this.listen()
    this.test()
  },
  computed: mapGetters({
    user: 'auth/user'
  }),
  methods: {
    async logout(){
      // Log out the user.
      await this.$store.dispatch('auth/logout');

      // Redirect to login.
      this.$router.push({ name: 'login' });
    },
    test(){
        axios.get('api/notifications').then(response => {
        //console.log(response)
      })
    },
    
    // refreshNoti() {
    //   axios.get(this.url).then(response => {
    //     this.bookingTable = response.data.data
    //     this.notification = response.data.message.data;
    //     this.bellBadge = response.data.unread_message.length;
    //     this.makePagination(response.data.message);
    //     console.log(response.data);
    //   })
    // },
    // getNotification(url){
    //   this.notification = [];
    //   this.loadingNotification=true;
    //   axios
    //     .get(url)
    //     .then((response) => {
    //       this.loadingNotification=false;
    //       this.notification = response.data.message.data;
    //       this.bellBadge = response.data.unread_message.length;
    //       this.makePagination(response.data.message);
    //       console.log(response.data);
    //     }).catch((error) => {
    //       console.log(error)
    //       this.$router.push({
    //         name: 'notfound'
    //       })
    //     })
    // },
    makePagination(data){
      let pagination ={
        current_page: data.current_page,
        last_page: data.last_page,
        next_page_url: data.next_page_url,
        prev_page_url: data.prev_page_url
      };
      this.pagination = pagination;
    },
    fetchPaginateBooking(url) {
      this.url = url;
      //this.loadingNotification=true;
      if(this.url !== null){
        axios
          .get(url)
          .then((response) => {
            this.loadingNotification=false;
            this.notification = this.notification.concat(response.data.message.data);
            this.bellBadge = response.data.unread_message.length;
            this.makePagination(response.data.message);
            console.log(this.notification);
          }).catch((error) => {
            console.log(error)
            this.$router.push({
              name: 'notfound'
            })
          })
      }
    },

    // notification with pusher 
    listen(){
      window.Echo = new Echo({
          broadcaster: 'pusher',
          key: window.config.pusherUrl,
          cluster: 'ap1',
          encrypted: true,
          auth: {
              headers: {
                  Authorization: 'Bearer ' + localStorage.getItem("token")
              },
          },
        
      });



                window.Echo.private(`App.User.`+ this.user.id)
            .notification((notification) => {
                console.log(notification);
            });

      //   window.Echo.channel('private-App.User.' + this.user.id)
      // .listen('BroadcastNotificationCreated', response => {
      //   if (! ('Notification' in window)) {
      //         alert('Web Notification is not supported');
      //         return;
      //   }
      //   console.log(response)
     
      // });
      
    },

    // readNotification(notification_id){
    //   axios
    //     .post('/api/notification/read-notification/'+notification_id)
    //     .then((response) => {
    //       this.getNotification(this.url);
    //     }).catch((error) => {
    //       console.log(error)
    //       this.$router.push({
    //         name: 'notfound'
    //       })
    //     })
    // },
    navigateTo(nav) {
      window.location.href = nav;
    }  
  }
}
</script>

<style scoped>
.profile-photo {
  width: 2rem;
  height: 2rem;
  margin: -.375rem 0;
}
.el-dropdown-menu{
  height: 50%;
}
#notification{
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 100%;
}
#notification-load-more{
  position: absolute;
  width: 100%;
  min-height: 20px;
  background: white;
  border: 1px solid #dcdfe6;
}
.el-dropdown-menu__item {
  line-height: 26px;
}
.opacity80{
  opacity: 0.8 ;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>