Laravel + Vue реализация уведомлений

В Laravel + Vue реализовать оповещения (уведомления) можно разными способами — от простых всплывающих сообщений до использования Laravel Echo и WebSockets. Ниже покажу базовый пример для уведомлений с использованием Vue и Laravel, без сложных реалтайм-вещей.

Простое оповещение (уведомление) после действия

1. Установка Vue (если ещё не установлен)

В Laravel 11 можно использовать Vite + Vue:

npm install vue

Создайте файл resources/js/app.js:

import { createApp } from 'vue'
import Notification from './components/Notification.vue'

const app = createApp({})

app.component('notification', Notification)

app.mount('#app')

2. Создание компонента Vue для оповещений

resources/js/components/Notification.vue:

<template>
  <div v-if="message" class="fixed top-4 right-4 bg-green-500 text-white p-4 rounded shadow-lg z-50">
    {{ message }}
  </div>
</template>

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

3. Использование во вьюхе Blade

В файле resources/views/welcome.blade.php (или любом другом Blade-шаблоне):

<div id="app">
    <notification message="{{ session('success') }}"></notification>
</div>

@vite('resources/js/app.js')

4. Контроллер

public function store(Request $request)
{
    // логика сохранения...

    return redirect()->back()->with('success', 'Запись успешно сохранена!');
}