Redirect route with data in Laravel Vue Inertia stack

In my controller i have

public function store(Request $request)
    {
        $postData = $this->validate($request, [
            'name' => 'required',
            'status' => 'required | boolean'
        ]);

        Room::create([
            'name' => $postData['name'],
            'active' => $postData['status'],
        ]);

        $message = "Room Added";

        return redirect::route('rooms.index', ['msg' => $message]);
    }

and i used ‘msg’ in my props

props:['rooms','errors','msg']

But for {{msg}} gives undefined and not any message.

Answer

You’re passing msg as a param to your route, not as a param to your Inertia::render call. And since you’re redirecting, you probably want to flash the message to the session and handle it on the HandleInertiaRequests middleware. Look into the example in the documentation.

So, first you redirect to rooms.index flashing the message:

return redirect()->route('rooms.index')->with('message', 'My message');

Then, Inertia requests the rooms.index route as a XHR request and before it hits your Controller, it passes through the HandleInertiaRequests middleware.

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'flash' => [
                'message' => fn () => $request->session()->get('message')
            ],
        ]);
    }
}

Now you can access it in your component via:

<template>
  <main>
    <header></header>
    <content>
      <div v-if="$page.props.flash.message" class="alert">
        {{ $page.props.flash.message }}
      </div>
      <slot />
    </content>
    <footer></footer>
  </main>
</template>