People searching “Inertia shared data Vue” put a post query in share() and then every page loads it, including the login screen. The setup guide already shares auth.user. Add one more value only when every page needs it.
TL;DR
- HandleInertiaRequests::share() runs for every Inertia response.
- Keep the query cheap and leave secrets out.
- Do not share
$request->user()a second time under another key. - Do not share an API token.
The fix#
public function share(Request $request): array
{
return [
...parent::share($request),
'appName' => config('app.name'),
];
}Read it from the page object:
<script setup lang="ts">
import { usePage } from "@inertiajs/vue3";
const page = usePage();
</script>
<template>
<p>{{ page.props.appName }}</p>
</template>A list of posts belongs on the controller that renders the list, not here. A shared closure should be lazy when the work is heavy, so a response that does not read the prop does not run it.
What to avoid#
Gotcha
Do not share $request->user() a second time under another key. The kit already did it. Do not share an API token. Shared props are in the HTML of every visit.
FAQ#
How do I share a prop with every Inertia page?
HandleInertiaRequests::share() runs for every Inertia response. Keep the query cheap and leave secrets out.
What goes wrong with Inertia shared data Vue?
Many developers put a post query in share() and then every page loads it, including the login screen. Do not share $request->user() a second time under another key.
