In this short lesson, instead of hard-coded Hi, user, let's show the actual logged-in user.
To show the user, we will use the same concept of sharing data by adding it to the HandleInertiaRequests Middleware. Let's pass only the name and email.
app/Http/Middleware/HandleInertiaRequests.php:
class HandleInertiaRequests extends Middleware{ // ... public function share(Request $request): array { return array_merge(parent::share($request), [ 'flash' => [ 'message' => fn () => $request->session()->get('message') ], 'user' => [ 'name' => $request->user()?->name, 'email' => $request->user()?->email, ], ]); }}Now, we can access these values using the $page.props.
resources/js/Layouts/App.vue:
<script setup>import { Link } from '@inertiajs/vue3'</script> <template>// ... <div class="flex items-center"> <div> <div>Hi, user</div> </div> <div class="flex flex-col"> <div>Hi, {{ $page.props.user.name }}</div> <div>{{ $page.props.user.email }}</div> </div> </div> <div class="flex items-center"> <Link :href="route('logout')" method="post" class="ml-4 inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition duration-150 ease-in-out hover:bg-gray-700 focus:shadow-outline-gray focus:border-gray-900 focus:outline-none active:bg-gray-900"> Log out </Link> </div>// ...</template>
This was a short lesson on passing the parameters to any Vue component without defining them as props.