How To Display Flash Messages With Laravel 9 + Jetstream + Vue Inertia.JS

Mark Caggiano
2 min readFeb 15, 2022

Laravel Jetstream can be confusing, so i decided to write articles to make it easy to develop using this stack.

Laravel Jetstream + Vue Inertia.JS is a very powerfull stack you can use to develop all kind of applications really fast. The only problem is that first time can be really confusing.

Today i was developing an app and i came across the necessity to display FlashMessages using Inertia.JS.

First things first. You can pass data to Inertia.JS pages directly from controller to the page, like this:

<?php

namespace App\Http\Controllers;

use App\Models\PaymentType;
use Illuminate\Http\Request;
use Inertia\Inertia;

class DashboardController extends Controller
{
/**
* Instantiate a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware(['auth:sanctum', 'verified']);
}

/**
* Display a listing of the resource.
*
* @return \Inertia\Response
*/
public function index()
{
$data = [1, 2, 3, 4, 5]

return Inertia::render('Dashboard', $data);
}
}

But this data will available just in the controller, and in the main component….

What If I Want To Access Data Every Request ?

If we want to access data at every request, like session data or generic data, without write code in every controller; we have to add a piece of code in a middleware, that should already be there, called HandleInertiaRequests.php.

Inertia.JS has a special function called share, which lets you share data between components, locally in a controller/page, or globally if you use a middleware or a similar concept.

So let’s make Flash Messages available globally, adding this code inside HandleInertiaRequests.php:

/**
* 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')
],
]);
}

Now we can access this data by simply doing this in our components:

<template>
<div…
Mark Caggiano

Internet Marketer, Web Developer, Traveler