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-if="notifications" v-loading="loading">
                  <div v-for="(value, key) in notifications" :key="key.id">
                      <el-dropdown-item>
                        <a v-on:click.prevent='navigateTo(value.data.link)'>
                          <!-- <b v-if="item.is_read == 0">
                            {{item.detail}}
                            asd
                          </b> -->
                          <span >
                            {{value.data.details}}
                            
                          </span>
                          <br/>
                          <span class="opacity80">
                            <timeago :datetime="value.created_at"></timeago>
                          </span>
                        </a>
                      </el-dropdown-item>
                   
                  </div>

                </div>
                <div v-else>There are no notifications.</div>

                </div>
                <el-button v-if="pagination.next_page_url != null" id="notification-load-more" v-on:click='fetchPaginateNotification(pagination.next_page_url)'>Load more</el-button>
              </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"
import store from '~/store'


export default {
  components: {
    LocaleDropdown,
  },

  data: () => ({
    appName: window.config.appName,
    //loadingNotification:false,
    bellBadge : 0,
    unread_message_length:0,
    loadMoreNotificationUrl: null,
    pagination: [],
    notifications: null,
    loading: true,
  }),
  mounted () {
  if (this.user){
      this.listenNotification()
      this.fetchNotification()
    }
  },
  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' });
    },
    fetchNotification(){
        axios.get('api/notifications').then(response => {
          this.notifications = response.data.notifications.data;
          this.makePagination(response.data.notifications);
          this.loading = false
      })
    },
    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;
    },
    fetchPaginateNotification(url) {
      this.loading = true
      this.loadMoreNotificationUrl = url
      //this.loadingNotification=true;
      if(this.url !== null){
        axios
          .get(url)
          .then((response) => {
            //this.loadingNotification=false;
            this.notifications = response.data.notifications.data;
            //this.bellBadge = response.data.unread_message.length;
            this.makePagination(response.data.notifications);
            this.loading = false
          }).catch((error) => {
            this.$message({
                showClose: true,
                message: error.response.data.message,
                type: 'Error fetching notifications',
                duration: 10000
            });
        })
      }
      else{
        this.pagination = null;
      }
    },

    // notification with pusher 
    listenNotification(){
      window.Echo = new Echo({
          broadcaster: 'pusher',
          key: window.config.pusherUrl,
          cluster: 'ap1',
          encrypted: true,
          authEndpoint: 'broadcasting/auth',
          auth: {
              headers: {
                  Authorization: 'Bearer ' + store.getters['auth/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;
}
#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>