Vue component for Flash messages and it also hides after 3 seconds

resources/assets/js/backend/app.js

@@ -735,4 +735,16 @@ function _init() {
             }
         });
     };
-}(jQuery));
\ No newline at end of file
+}(jQuery));
+
+/**
+ * Next, we will create a fresh Vue application instance and attach it to
+ * the page. Then, you may begin adding components to this application
+ * or customize the JavaScript scaffolding to fit your unique needs.
+ */
+
+Vue.component('flash', require('../components/backend/Flash.vue'));
+
+const app = new Vue({
+    el: '#app'
+});
\ No newline at end of file

resources/assets/js/bootstrap.js

@@ -50,4 +50,10 @@ window.axios.defaults.headers.common = {
 // var glob = require( 'glob' )
 //   , path = require( 'path' );
 
-require('tinymce/tinymce');
\ No newline at end of file
+require('tinymce/tinymce');
+
+window.events = new Vue();
+
+window.flash = function(message, type) {
+	window.events.$emit('flash', message, type);
+}
\ No newline at end of file

resources/assets/js/components/backend/Flash.vue

+<template>
+    <div :class="typeClass" v-show="show">
+        {{ body }}
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['message' , 'type'],
+        
+        data() {
+            return {
+                body: '',
+                typeClass: '',
+                show: false
+            }
+        },
+
+        created() {
+            var context = this;
+            if(this.message && this.type) {
+                this.flash(this.message, this.type);
+            }
+
+            window.events.$on('flash', function(message, type) {
+                context.flash(message, type);
+            });
+        },
+
+        methods: {
+            flash(message, type) {
+                this.body = message;
+                this.typeClass = "alert alert-" + type;
+                this.show = true;
+
+                this.hide();
+            },
+
+            hide() {
+                setTimeout(() => {
+                    this.show = false;
+                }, 3000);
+            }
+        }
+    }
+</script>

resources/views/backend/layouts/app.blade.php

@@ -45,7 +45,7 @@
         <div class="loading" style="display:none"></div>
         @include('includes.partials.logged-in-as')
 
-        <div class="wrapper">
+        <div class="wrapper" id="app">
             @include('backend.includes.header')
             @include('backend.includes.sidebar-dynamic')
 

resources/views/includes/partials/messages.blade.php

+@php
+    $message = '';
+    $type = '';
+@endphp
+
 @if ($errors->any())
-    <div class="alert alert-danger">
-        @foreach ($errors->all() as $error)
-            {!! $error !!}<br/>
-        @endforeach
-    </div>
+    @php
+        $type = 'danger';
+    @endphp
+    @foreach ($errors->all() as $error)
+        @php
+            $message .= $error . '<br/>';
+        @endphp
+    @endforeach
 @elseif (session()->get('flash_success'))
-    <div class="alert alert-success">
-        @if(is_array(json_decode(session()->get('flash_success'), true)))
-            {!! implode('', session()->get('flash_success')->all(':message<br/>')) !!}
-        @else
-            {!! session()->get('flash_success') !!}
-        @endif
-    </div>
+    @php
+        $type = 'success';
+    @endphp
+    @if(is_array(json_decode(session()->get('flash_success'), true)))
+        @php
+            $message = implode('', session()->get('flash_success')->all(':message<br/>'));
+        @endphp
+    @else
+        @php
+            $message = session()->get('flash_success');
+        @endphp
+    @endif
 @elseif (session()->get('flash_warning'))
-    <div class="alert alert-warning">
-        @if(is_array(json_decode(session()->get('flash_warning'), true)))
-            {!! implode('', session()->get('flash_warning')->all(':message<br/>')) !!}
-        @else
-            {!! session()->get('flash_warning') !!}
-        @endif
-    </div>
+    @php
+        $type = 'warning';
+    @endphp
+    @if(is_array(json_decode(session()->get('flash_warning'), true)))
+        @php
+            $message = implode('', session()->get('flash_warning')->all(':message<br/>'));
+        @endphp
+    @else
+        @php
+            $message = session()->get('flash_warning');
+        @endphp
+    @endif
 @elseif (session()->get('flash_info'))
-    <div class="alert alert-info">
-        @if(is_array(json_decode(session()->get('flash_info'), true)))
-            {!! implode('', session()->get('flash_info')->all(':message<br/>')) !!}
-        @else
-            {!! session()->get('flash_info') !!}
-        @endif
-    </div>
+    @php
+        $type = 'info';
+    @endphp
+    @if(is_array(json_decode(session()->get('flash_info'), true)))
+        @php
+            $message = implode('', session()->get('flash_info')->all(':message<br/>'));
+        @endphp
+    @else
+        @php
+            $message = session()->get('flash_info');
+        @endphp
+    @endif
 @elseif (session()->get('flash_danger'))
-    <div class="alert alert-danger">
-        @if(is_array(json_decode(session()->get('flash_danger'), true)))
-            {!! implode('', session()->get('flash_danger')->all(':message<br/>')) !!}
-        @else
-            {!! session()->get('flash_danger') !!}
-        @endif
-    </div>
+    @php
+        $type = 'danger';
+    @endphp
+    @if(is_array(json_decode(session()->get('flash_danger'), true)))
+        @php
+            $message = implode('', session()->get('flash_danger')->all(':message<br/>'));
+        @endphp
+    @else
+        @php
+            $message = session()->get('flash_danger');
+        @endphp
+    @endif
 @elseif (session()->get('flash_message'))
-    <div class="alert alert-info">
-        @if(is_array(json_decode(session()->get('flash_message'), true)))
-            {!! implode('', session()->get('flash_message')->all(':message<br/>')) !!}
-        @else
-            {!! session()->get('flash_message') !!}
-        @endif
-    </div>
-@endif
\ No newline at end of file
+    @php
+        $type = 'info';
+    @endphp
+    @if(is_array(json_decode(session()->get('flash_message'), true)))
+        @php
+            $message = implode('', session()->get('flash_message')->all(':message<br/>'));
+        @endphp
+    @else
+        @php
+            $message = session()->get('flash_message');
+        @endphp
+    @endif
+@endif
+
+<!-- Flash Message Vue component -->
+<flash message="{!! $message !!}" type="{{ $type }}"></flash>
\ No newline at end of file