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:
<?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 v-if="$page.props.flash.message" class="flex items-center" role="alert">
<p>{{ $page.props.flash.message }}</p>
</div>
</template>To make it more easier… i also created a Vue component called FlashMessages, which you can personalize as you wish. Here it is the code:
<template>
<div v-if="$page.props.flash.message" class="flex items-center rounded bg-blue-500 text-white text-sm font-bold px-4 py-3" role="alert">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/>
</svg>
<p>{{ $page.props.flash.message }}</p>
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({})
</script>You can find a lot of premade alerts using TailwindCSS, i just copied one from their website.
So thank you very much for reading, please clap if you found this article to be usefull.
Thanks,
Mark.
