В 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', 'Запись успешно сохранена!');
}
Автор: Евгений Морковин
0 комментариев