How To Display Flash Messages With Laravel 9 + Jetstream + Vue Inertia.JS
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:
class DashboardController extends Controller
* Instantiate a new controller instance.
* @return void
public function __construct()
* 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: