Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Ookma-Kyi's avatar

Flash messages

How do you display flash messages that are generated using the with() method? I tried

// then redirect to the characters index
        return redirect('characters')->with([
            'success', 'Character created successfully'
        ]);

but nothing is diplayed. I even tried to code a component but still could not get it to work: CharacterController.php

// then redirect to the characters index
        return redirect('characters')->with([
            'message', 'Character created successfully'
        ]);

Character/index.vue

<FlashMessage :message="{{ session('message') }}}"></FlashMessage>

FlashMessage.vue

<template>
    <div class="alert alert-success">
        {{ message }}
    </div>
</template>

<script>
    defineProps(['message')
</script>
but I get errors around the `session('message')` part of it. Any ideas?
0 likes
3 replies
LaryAI's avatar

Certainly! Here’s how you can properly set and display flash messages in Laravel, especially when using the with() method.

1. Correct Usage of with()

The with() method expects key-value pairs, not an array. So, you should do:

return redirect('characters')->with('success', 'Character created successfully');

or for a generic message:

return redirect('characters')->with('message', 'Character created successfully');

2. Accessing the Flash Message in Blade

If you're rendering a Blade view, you would typically check for the session key:

@if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif

3. Passing Flash Messages to Vue Components

If your frontend is Vue (e.g., Inertia.js or a SPA), you need to pass the flash message from Laravel to your Vue component. Here’s how:

a) In Controller

return redirect('characters')->with('message', 'Character created successfully');

b) In Blade (if using Vue as a Blade component)

Pass the flash message as a prop:

<flash-message message="{{ session('message') }}"></flash-message>

c) Inertia.js Example

If you’re using Inertia.js, you can share flash messages globally in a service provider:

// AppServiceProvider.php
use Illuminate\Support\Facades\Session;
use Inertia\Inertia;

public function boot()
{
    Inertia::share([
        'flash' => function () {
            return [
                'message' => Session::get('message'),
                'success' => Session::get('success'),
            ];
        },
    ]);
}

Then in your Vue component, you can access it via props or $page.props.flash.message.

4. Fixing Your Vue Component

Your Vue component has a typo and should look like this:

<template>
    <div v-if="message" class="alert alert-success">
        {{ message }}
    </div>
</template>

<script setup>
defineProps(['message'])
</script>

5. Example Usage in Parent Component

If you’re passing the message as a prop:

<FlashMessage :message="flash.message" />

Or, if using Inertia.js:

<FlashMessage :message="$page.props.flash.message" />

Summary:

  • Use with('key', 'value') instead of an array.
  • Pass the flash message to your frontend (Blade or Vue).
  • Display it in your component, checking if the message exists.

Let me know if you need a more specific example for your stack!

Ookma-Kyi's avatar

Sorry, Larry, but what you suggested didn't work.

AppServiceProvider.php

        // share flash messages
        Inertia::share([
            'flash' => function () {
                return [
                    'message' => Session::get('message'),
                    'type' => Session::get('type'),
                ];
            },
        ]);

Flash Component:

<template>
    <div v-if="message">
        <div v-if="type === 'success'" class="alert alert-success">
            {{ message }}
        </div>
        <div v-if="type === 'error'" class="alert alert-error">
            {{ message }}
        </div>
    </div>
</template>

<script>
    defineProps(['message', 'type'])
</script>

Controller:

Page:

AddWebContribution's avatar

@ookma-kyi try this code

return redirect('characters')->with('message', 'Character created successfully');

<FlashMessage :message="@json(session('message'))" />

Please or to participate in this conversation.