How to redirect data from the controller to the View component

Step 1: Preparation on the Laravel side

Controller

In the Laravel controller, we process the logic and use the with() method to transfer data to the session. For example:

public function someAction()
{
// Logic processing...
// For example, the user is denied access and we redirect him to the authorization page

    // Storing the message in the session
    return redirect('/some-route')->with('message', 'Data successfully transmitted!');
}
                    

Transferring data to a view

Make sure that the data transmitted in the session is transmitted to the target controller in accordance with the specified route (route - /some-route). For example:

public function showLogin(): Response
{
return Inertia::render('Auth/Login', [
'message' =session('message'), // Passing data from the session
    ]);
}
                    

Step 2: Getting data on the Vue side

Using the script setup Composition API to get the props

Open the component to which we want to transfer the data.

Since we pass data directly to our component in the form of passes, we can simply access them without using usePage :

<template>
    <div>
        <div v-if="message" class="alert alert-info">
            {{ message }}
        </div>
        <h1>Welcome!</h1>
    </div>
</template>

<script setup>
// <![CDATA[
// We accept defineProps
({
  message: {
    type: String,
  },
});
// ]]>
</script>

Now, when we go to the page, the information from the session will be shown in our Vue component.