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.