People searching “Inertia layout props Vue” pass the post into the layout component and then the title is empty. A persistent layout wraps the page. The page owns the props. The layout guide is how the kit picks AppLayout. This page is how that layout reads a value.
TL;DR
- A persistent layout does not receive the page props as its own props.
- usePage() does.
- Do not type the layout as if
postis always there. - Do not wrap
<AppLayout>inside the page template.
The fix#
<script setup lang="ts">
import { usePage } from "@inertiajs/vue3";
const page = usePage();
</script>
<template>
<header>{{ page.props.auth?.user?.name }}</header>
<slot />
</template>auth is shared in the setup guide. A prop you returned from one controller, such as post, is on page.props only while that page is showing. Do not type the layout as if post is always there.
What to avoid#
Gotcha
Do not wrap <AppLayout> inside the page template. The kit’s createInertiaApp already chose the layout. A second wrap renders it twice. The layout guide says the same thing.
FAQ#
How do I read page props from a persistent layout?
A persistent layout does not receive the page props as its own props. usePage() does.
What goes wrong with Inertia layout props Vue?
Many developers pass the post into the layout component and then the title is empty. Do not type the layout as if post is always there.
