the flash message don't show with persist layout with inertia

Hello guys, i'm using inertia with vue js on laravel project and I've set a default layout to my pages

	//vite.config.js
  resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', {eager: true})
        let page = pages['./Pages/${name}.vue']
        page.default.layout = page.default.layout || Layout
        return page
    },

and i have flash messages like so

// the controller
public function store($request) {
   // some logic 
	return back()->with('message','Your Request has been done successfully') ;

}

//HandleInertiaRequests middleware
  return array_merge(parent::share($request), [
    
            'flash' => function () use ($request) {
                return [
                    'response' => $request->session()->get('message')
                ];
            }
        ]);

the problem here that the flash messages is shown only if i performed the request in new tab it works fine perform the the request in new tab

// test.vue
<Link method="post" preserve-scroll href="/home/test">test</Link>

because the shared flash data is not updated in the default Layout

<script setup>
/// Layout.vue
   import {usePage} from "@inertiajs/vue3";
   let response = usePage().props.flash.message
   if(response.value) {
       alert(message)

</script>

shahr

3 years ago

Level 10

It looks like the issue might be related to how Inertia handles shared data between components. By default, shared data is only updated when the URL changes, which is why you're seeing the flash message only when you open the page in a new tab.

To fix this, you can use the shouldInterpolate option in your middleware to force Inertia to update the shared data on every request. Here's an example:

//HandleInertiaRequests middleware
return array_merge(parent::share($request), [
    'flash' => function () use ($request) {
        return [
            'response' => $request->session()->get('message')
        ];
    }
], [
    'shouldInterpolate' => true // Add this line
]);

With this change, your shared flash data should be updated on every request, even if the URL doesn't change. This should allow your flash messages to show up properly in your default layout.

Note that forcing interpolation on every request can have performance implications, so make sure to test the impact on your app before using this approach in production.

xuchunyang

2 years ago

Level 2

@shahr I've searched through the source code, GitHub, and Google, but I couldn't find any information about the origin of shouldInterpolate., any idea where it comes from?

Tbacon

2 years ago

Level 4

@shahr Thanks alot. I had been searching everywhere for how to do this.

Please or to participate in this conversation.