- Supports flashing multiple messages to the session
- Flexible messages - fill the
$options
array with your custom data - Helper methods that can easily be remembered and allows clean controllers
- Inertia + Vue implementation example included below
- Automated tests running on Laravel 10
composer require rboonzaijer/laravel-multiple-flash-messages:^1.0
class UserController
{
public function store()
{
// ...
flash('User created');
flashWarning('User has no permissions yet');
return to_route(...);
}
{{-- /resources/views/layouts/app.blade.php --}}
@include('partials.flash-messages.container')
{{-- /resources/views/partials/flash-messages/container.blade.php --}}
@if(session()->has('messages'))
<div class="flash-messages">
@foreach(session()->get('messages') as $index => $message)
@include('partials.flash-messages.message', [
'index' => $index,
'message' => $message
])
@endforeach
</div>
@endif
{{-- /resources/views/partials/flash-messages/message.blade.php --}}
<div class="alert alert-{{ $message['type'] }}" onclick="javascript:this.remove();">
<span>{{ $message['message'] }}</span>
</div>
flash('Flagged', [
'type' => 'danger-flagged',
'description' => 'You have been flagged for creating to many users',
'details' => [
'ticket' => 123,
'urls' => [
'https://example.com',
'http://example.com',
]
]
]);
{{-- /resources/views/partials/flash-messages/message.blade.php --}}
<div class="{{ $message['type'] }}" id="flash-message-{{ $index }}">
<span class="title">
{{ $message['message'] }}
@if(isset($message['details']['ticket']))
<span>- Ticket #{{ $message['details']['ticket'] }}</span>
@endif
</span>
@if(isset($message['description']))
<p class="description">
{{ $message['description'] }}
</p>
@endif
@if(isset($message['details']['urls']))
<ul class="urls">
@foreach($message['details']['urls'] as $index => $url)
<li>
<a href="{{ $url }}">
{{ $url }}
</a>
</li>
@endforeach
</ul>
@endif
</div>
These helper methods are available and they all use the same arguments.
- @param string $message ( required ) - Contains the message
- @param array $options ( default = [ ] ) - add additional info in the array
- @param boolean $flashToSession ( default = true ) - for special use cases (see below)
flash($message, $options, $flashToSession);
flashInfo($message, $options, $flashToSession);
flashSuccess($message, $options, $flashToSession);
flashWarning($message, $options, $flashToSession);
flashError($message, $options, $flashToSession);
This can be used if you want to send the messages only if a certain condition is met, for example:
flash('Saved', [], Auth::user()->hasNotificationsEnabled());
or
flash('Saved', [], false);
// ...
if(Auth::user()->hasNotificationsEnabled()) {
flashMessagesToSession();
}
- https://inertiajs.com/pages#persistent-layouts
- https://inertiajs.com/pages#default-layouts
- https://tailwindcss.com/docs/guides/laravel
- https://daisyui.com/components/toast/
// app/Http/Middleware/HandleInertiaRequests.php
public function share(Request $request): array
{
return array_merge(parent::share($request), [
'messages' => fn () => session()->get('messages'),
]);
}
<script setup>
/* /resources/js/Shared/Layout.vue */
import FlashMessages from '../Shared/FlashMessages.vue';
</script>
<template>
<!-- ... -->
<FlashMessages />
<!-- ... -->
</template>
<!-- /resources/js/Shared/FlashMessages.vue -->
<template>
<div v-if="$page.props.messages" class="toast toast-top toast-end">
<div v-for="message, index in $page.props.messages" :key="index" class="flex justify-between alert" :class="'alert-' + message['type']">
<span>{{ message['message'] }}</span>
<span class="btn btn-xs" @click="$page.props.messages.splice(index, 1)">x</span>
<!-- Note: officially you should not remove props like this, but for messages I see no issue... -->
</div>
</div>
</template>
/* tailwind.config.js */
/* Don't forget to set a safelist for classes that should always be available */
safelist: [
'toast',
'toast-top',
'toast-end',
'alert',
'alert-info',
'alert-success',
'alert-warning',
'alert-error',
],
composer run test