How to Display Flash Messages in Laravel Inertia and Vue

2 years ago admin Laravel

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>

Related Tuorials

How to Add a Relationship to a Select in Filament

In this lesson, we will see how to add a relationship to a select in Filament.Let's assume that we h...


How to Generate Slugs from a Title in Filament

In this lesson, we will see how to generate slugs from a title in Filament, Sometimes we need to gen...


How to Change the Order of the Filament Left Navigation Menu Items

In this lesson, we will see how to change the order of the filament left navigation menu items.Somet...


How to Hide the Info Widget on the Filament Dashboard

In this lesson, we will see how to hide the info widget on the Filament dashboard. The info widget i...


How to Add Bootstrap 5 to Laravel 12 with Vite

In this tutorial, we will see how to add Bootstrap 5 to Laravel 12 with Vite, The process is simple...


How to Add Middleware in Laravel 12

In this tutorial, we will see how to add middleware in Laravel 12, Now we can use bootstrap/app.php...


How to Add React js to Laravel 12 with Vite

In this tutorial, we will see how to add React JS to Laravel 12 with Vite. Since version 9.19, Larav...


How to Add Vue js 3 to Laravel 12 with Vite

This tutorial will show us how to add Vue js 3 to Laravel 12 with Vite. Since version 9.19, Laravel...


How to Show the Old Values in Multiple Select Options in Laravel

In this lesson, we will see how to show the old values in multiple select options when editing in La...


How to Get the Old Value of the Select in Laravel

In this lesson, we will see how to get the old value of the select when editing in Laravel, this app...