How to Display Flash Messages in Laravel Inertia and Vue
In today's lesson, we are going to see how to display flash messages in Laravel Inertia js and Vue js, let's assume that we are working on a task application and once a task is added we want to display a successful flash message.
Create the controller
Inside the controller, once the task is added we set the flash message in the session.
<?php
namespace App\Http\Controllers;
use App\Models\Task;
use Illuminate\Http\Request;
class TaskController extends Controller
{
/**
* Store a newly created resource in storage.
*/
public function store(Request $request)
{
//
$this->validate($request, [
'title' => 'required',
'body' => 'required',
'category_id' => 'required',
]);
Task::create([
'title' => $request->title,
'body' => $request->body,
'category_id' => $request->category_id,
]);
return redirect()->route('home')->with([
'message' => 'Task added successfully',
'class' => 'alert alert-success'
]);
}
}
Update the file HandleInertiaRequests
Inside the Middleware folder, update the file HandleInertiaRequests.php, here we add the code to share data as props with other pages or components.
The data here is the successful flash message and you can add any kind of message you have just to change the class.
<?php
namespace App\Http\Middleware;
use Illuminate\Http\Request;
use Inertia\Middleware;
class HandleInertiaRequests extends Middleware
{
/**
* The root template that's loaded on the first page visit.
*
* @see https://inertiajs.com/server-side-setup#root-template
* @var string
*/
protected $rootView = 'app';
/**
* Determines the current asset version.
*
* @see https://inertiajs.com/asset-versioning
* @param \Illuminate\Http\Request $request
* @return string|null
*/
public function version(Request $request): ?string
{
return parent::version($request);
}
/**
* Defines the props that are shared by default.
*
* @see https://inertiajs.com/shared-data
* @param \Illuminate\Http\Request $request
* @return array
*/
public function share(Request $request): array
{
return array_merge(parent::share($request), [
//
'flash' => [
'message' => fn () => $request->session()->get('message'),
'class' => fn () => $request->session()->get('class')
],
]);
}
}
Getting shared data
Now we can access the shared data inside our component and display the successful flash message like this:
<div v-if="$page.props.flash.message" :class="$page.props.flash.class">
{{ $page.props.flash.message }}
</div>