Прежде, чем мы начнем, откройте файл package.json в корне вашего Laravel проекта и убедитесь, что там есть строчка "vue": "^2.1.10" (вместо 2.1.10 может быть более новая версия). После этого выполните команду npm run install в терминале из корня проекта.

Laravel View

Сначала давайте добавим наш новый компонент во view. Откройти главный шаблон вашего сайта (по-умолчанию это resources/views/layouts/app.blade.php) и добавьте новый элемент в начало div'а <div id="app">. Назовем наш элемент notification.

<notification></notification>

Теперь давайте добавим условия для отображения нашего компонента на случай, когда уведомление было сгенерировано в контроллере с помощью сессий. Laravel посылает уведомления с ключем status, мы же будем использовать другой ключ - отсюда двойное условие. Данные будут передавать в компонент через входные параметры (атрибуты). В качестве параметра type мы будем использовать alert-* классы Bootstrap'а, чтобы упростить задачу.

@if (session('notification'))
    <notification type="{{ session('notificationType') }}" message="{{ session('notification') }}"></notification>
@elseif (session('status'))
    <notification type="alert-primary" message="{{ session('status') }}"></notification>
@else
    <notification></notification>
@endif

Компонент Vue.js

Следующим шагом давайте создадим новый Vue компонент в папке resources/assets/js/components. Назовем его Notification.vue. Далее необходимо зарегистрировать наш компонент глобально в файле resources/assets/js/app.js.

Vue.component('notification', require('./components/Notification.vue'));

Откройте файл компонента. Код ниже это стандартная структура *.vue файла. 

<template>
</template>

<style>
</style>

<script>
    export default {

    }
</script>

Начнем добавлять код в эту структуру. Первым делом займемся шаблоном (<template>). У каждого шаблона должен быть один единственный родительский компонент. Заодно мы будем использовать этот элемент для позиционирования нашего уведомления в окне браузера. Вложенный в него div - это непосредственно само уведомление.

<template>
    <div class="notification-wrapper">
        <div class="notification alert alert-primary">
            Какое-то уведомление
        </div>
    </div>
</template>

Чтобы скомпилировать наш компонент, выполните команду npm run dev. Зайдите на ваш сайт и вы должны увидеть текст Какое-то уведомление вверху страницы. Далее отредактируем блок <style>, добавим CSS для нашего компонента.

<style>
.notification-wrapper {
    position: fixed;
    left: 50%;
    top: 2rem;
    z-index: 10000;
}

.notification {
    position: relative;
    left: -50%;
}
</style>

Этот код поместит наше уведомление вверху экрана и отцентрирует его горизонтально. Число 10000 для z-index это просто случайное большое число, благодаря которому наше уведомление будет отображаться поверх остальных элементов страницы.

Теперь переходим к блоку <script> и начинаем работать непосредственно над функционалом. Мы передаем в наш компонент 2 параметра - давайте объявим их для того, чтобы Vue мог прочитать их значения.

<script>
    export default {
        props: ['type', 'message']
    }
</script>

Под props нам нужно объявить функцию data(), которая будет возвращать объект с данными. Не забудьте добавить запятую после массива props.

data() {
    return {
        show: false,
        notification: this.message,
        alertClass: this.type,
        hideTimeout: false
    }
}

Свойство show будет отвечать за видимость компонента. По умолчанию он будет скрыт. hideTimeout будет использоваться для того, чтобы автоматически скрывать компоненты по прошествии нескольких секунд.

Теперь вернемся к нашему шаблону и привяжем данные к DOM. После всех изменений блок <template> должен выглядеть так:

<div class="notification-wrapper">
    <div :class="'notification alert ' + alertClass"
        v-show="show"
        v-text="notification"></div>
</div>

Атрибут "v-show" управляет видимостью элемента. Элемент будет виден только тогда, когда значение перменной show равно true.

Далее нам нужно показать пользователю уведомление в том случае, если в компонент были переданы данные через его параметры (если уведомление было сгенерировано в контроллере). Добавьте следующий код в блок <script>:

created () {
    if (this.notification) {
        this.showNotification();
    }
},

methods: {
    showNotification() {
        this.show = true;
    }
}

Чтобы отобразить уведомление, достаточно задать переменной this.show значение true. Также было бы неплохо автоматически скрывать уведомление через, допустим, 5 секунд. Для этого нам просто нужно запустить таймер, который установит значение this.show обратно на false через 5 секунд. Вот изменения, которые нужно сделать в коде:

showNotification() {
    this.show = true;
    this.hideNotification();
},

hideNotification() {
    this.hideTimeout = setTimeout(() => {
        this.show = false;
    }, 5000);
}

Мы сохраняем таймер в переменную на случай, если появится необходимость скрыть уведомление раньше, чем пройдут 5 секунд. Кстати, давайте сразу добавим метод для ручного закрытия уведомления прямо под hideNotification().

destroyNotification() {
    this.show = false;
    clearTimeout(this.hideTimeout);
}

clearTimeout() прекращает работу таймера. Это нужно для того, чтобы если будет показано новое уведомление сразу после закрытия предыдущего, новое уведомление не будет закрыто преждевременно таймером от старого уведомления. Остается только привязать этот метод к событию клика по уведомлению. Отредактируйте шаблон следующим образом:

<div :class="'notification alert ' + alertClass"
    v-show="show"
    v-text="notification"
    @click="destroyNotification"></div>

Основная часть разработки закончена. Если вам нужно сгенерировать уведомление в контроллере, добавьте следующие строчки к ответу (response) контроллера:

->with('notification', 'Данные были успешно сохранены!')    // Сообщение
->with('notificationType', 'alert-success'); // Класс Bootstrap'а

Генерируем уведомления в JavaScript

Наверняка вам понадобится возможность генерировать динамические уведомления через JavaScript. Чтобы получить такую возможность, откройте файл resources/assets/js/bootstrap.js и добавьте в самый конец следующие строчки:

window.Vue = require('vue');

window.events = new Vue();

window.showNotification = function(message, type = 'alert-primary') {
    window.events.$emit('showNotification', message, type);
}

Здесь мы создаем глобальную JS функцию, которая генерирует глобальное событие Vue. Мы передаем в этом событии текст уведомления и его тип. По-умолчанию тип равен alert-primary, поэтому этот параметр в нашей функции необязательный.

Внутри нашего компонента мы будем ожидать это глобальное событие Vue. Добавьте следующий код в метод created():

window.events.$on('showNotification', (message, type) => {
    this.notification = message;
    this.alertClass = type;
    this.showNotification();
});

Готово. В любой момент из любого места в JS коде вы можете вызвать глобальный метод, который мы только что создали, чтобы показать произвольное уведомление:

showNotification('Что-то пошло не так...', 'alert-danger');

Полный код

resource/views/layouts/app.blade.php (или любой другой главный шаблон)

...
<body>
    <div id="app">
        @if (session('notification'))
            <notification type="{{ session('notificationType') }}" message="{{ session('notification') }}"></notification>
        @elseif (session('status'))
            <notification type="alert-primary" message="{{ session('status') }}"></notification>
        @else
            <notification></notification>
        @endif

        ...
    </div>
</body>
...

resources/assets/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('notification', require('./components/Notification.vue'));

const app = new Vue({
    el: '#app'
});

resources/assets/js/bootstrap.js

window.Vue = require('vue');

window.events = new Vue();

window.showNotification = function(message, type = 'alert-primary') {
    window.events.$emit('showNotification', message, type);
}

resources/assets/js/components/Notification.vue

<template>
    <div class="notification-wrapper">
        <div :class="'notification alert ' + alertClass"
            v-show="show"
            v-text="notification"
            @click="destroyNotification"></div>
    </div>
</template>

<style>
.notification-wrapper {
    position: fixed;
    left: 50%;
    top: 2rem;
    z-index: 10000;
}

.notification {
    position: relative;
    left: -50%;
}
</style>

<script>
    export default {
        props: ['type', 'message'],

        data() {
            return {
                show: false,
                notification: this.message,
                alertClass: this.type,
                hideTimeout: false
            }
        },

        created () {
            if (this.notification) {
                this.showNotification();
            }

            window.events.$on('showNotification', (message, type) => {
                this.notification = message;
                this.alertClass = type;
                this.showNotification();
            });
        },

        methods: {
            showNotification() {
                this.show = true;
                this.hideNotification();
            },

            hideNotification() {
                this.hideTimeout = setTimeout(() => {
                    this.show = false;
                }, 5000);
            },

            destroyNotification() {
                this.show = false;
                clearTimeout(this.hideTimeout);
            }
        }
    }
</script>