Self Contained Vue.js Instance to Manage LaraFlash Notifications in Laravel

toast-notifications.blade.php

{{--
This makes a great "partial" to add to your template layout file. It will self manage your
notifications so you do not need to worry about displaying them. Simply just add notifications
using LaraFlash (Laravel Package) in your controllers, and they will display intelligently
and elegantly into your views.

Simply use an @include statement in your main template/layout file to this partial so that 
this partial is included with every view. The rest can be set once and forgotten.

Requirements:
1. Lodash
2. Vue.js
3. Buefy
4. LaraFlash
5. Laravel/Blade (obviously)

See comments on this GitHub Gist page for more details and links or explanation. https://gist.github.com/jacurtis/9fa687e8f7512bb197decce7ffc30091
--}}

<div id="toast-notifications" style="display:none;"></div>
<script>
  var notifications = new Vue({
    el: '#toast-notifications',
    data: {
      session: {!!json_encode(LaraFlash::allByType())!!},
      validMethods: ['general', 'primary', 'success', 'info', 'warning', 'danger', 'snackbar']
    },
    mounted: function() {
      let vm = this;
      this.$nextTick(function() {
        vm.session.forEach(function(e) {
          if (_.includes(vm.validMethods, e.type.toLowerCase())) {
            vm[e.type.toLowerCase()](e.content);
          } else {
            vm.general(e.content);
          }
        });
      })
    },
    methods: {
      general: function(msg, pos = 'is-top', dur = 5000, color = 'is-dark') {
        this.$toast.open({
              duration: dur,
              message: msg,
              position: pos,
              type: color
          });
      },
      primary: function(msg, pos = 'is-top', dur = 5000) {
        this.$toast.open({
              duration: dur,
              message: msg,
              position: pos,
              type: 'is-primary'
          });
      },
      success: function(msg, pos = 'is-top', dur = 5000) {
        this.$toast.open({
              duration: dur,
              message: msg,
              position: pos,
              type: 'is-success'
          });
      },
      info: function(msg, pos = 'is-top', dur = 5000) {
        this.$toast.open({
              duration: dur,
              message: msg,
              position: pos,
              type: 'is-info'
          });
      },
      warning: function(msg, pos = 'is-top', dur = 5000) {
        this.$toast.open({
              duration: dur,
              message: msg,
              position: pos,
              type: 'is-warning'
          });
      },
      danger: function(msg, pos = 'is-top', dur = 5000) {
        this.$toast.open({
              duration: dur,
              message: msg,
              position: pos,
              type: 'is-danger'
          });
      },
      snackbar: function(msg, optionsPassed = {}, callback) {
        const defaults = {
          position: 'is-bottom-right',
          duration: 5000,
          type: 'is-success',
          actionText: 'Ok'
        };
        const options = Object.assign({}, defaults, optionsPassed);

        this.$snackbar.open({
              duration: options.duration,
              message: msg,
              type: options.type,
              position: options.position,
              actionText: options.actionText,
              onAction: () => {
                if (typeof callback === 'function') callback();
              }
          })
      },
      toast: function(msg, optionsPassed = {}) {
        const defaults = {
          position: 'is-top',
          duration: 5000,
          type: 'is-dark'
        };
        const options = Object.assign({}, defaults, optionsPassed);

        this.$toast.open({
              duration: options.duration,
              message: msg,
              position: options.position,
              type: options.type
          });
      }
    }
  })
</script>

This is an easy way that I add notifications to my applications. It relies on several packages which I tend to use in all of my apps. So it isn't really adding any dependencies for me, since I already rely on these packages.

1. Lodash - comes pre-bundled with Laravel 5.4+
2. Vue.js - also pre-bundled with Laravel 5.4+ unless you changed a preset
3. Buefy - A Vue.js component system for Bulma.
4. LaraFlash - the best way to manage flash notifications in Laravel. Allows direct support for different types, titles, priorities, and more. Super easy and powerful to use.
5. Laravel and Laravel Blade - I don't think you would be here anyways. But this is a blade file, so it goes without saying.

Note: On line 25 you can change this out or modify this depending on how you want your notifications displayed. By default we use the allByType() which is a LaraFlash method to organize all of your LaraFlash messages by type. The default is descending order. This means they will display in this order: danger, warning, info, success, others (anything else). You can pass in allByType('asc') for ascending order which will reverse that displaying success first, down to danger. A second boolean parameter also dictates how "other" types are handled. By default they are displayed after the main 4 types. But passing in a value of false will show the "other" types first and then the official types in the order specified (asc or desc). So LaraFlash::allByType('asc', false) will display all "other" notifications first, then success, info, warning, and finally danger.

Another option is to simple change this line to LaraFlash::all() which will simply display the messages in the order they were flashed in the controller. So the first message flashed will show first, regardless of priority or type, and so on in order they were set or flashed.

Lastly you could try LaraFlash::allByPriority() which will sort them based on the priority value they were set with. So if you flashed them using LaraFlash::success('Hello World')->priority(10) then they will be sorted based on that priority value. By default in desc or descending order (highest priority number first, down to lowest). But you can also pass asc into the method to sort in ascending order with the lowest priority notification displaying first up to the highest priority notification displaying last.

With all of these methods, if there is a "tie" (multiple of the same type notifications when sorting by type, or multiple notifications with the same priority value when sorting by priority) then within those tied notifications, the order they were flashed to the session will break the tie.

There is a small add to put in this file to permet people to use laraflash with redirect without any add in the config :

Just added a $sessions variable to get session flashes

@php $sessions = array(); $laraflashes = session()->get('laraflash'); if (!is_null($laraflashes)) { $sessions = $laraflashes->toArray(); } session()->forget('laraflash'); @endphp

and replaced

session: {!!json_encode(LaraFlash::allByType())!!},

by

session: {!!json_encode($sessions)!!},

Thanks @BabyGeek. More fixes below.
To make it work with Buefy ^0.8.20, replace $toast with $buefy.toast and $snackbar with $buefy.snackbar