With Inertia, each page in your application has its own controller and corresponding JavaScript component. This allows you to retrieve just the data necessary for that page, no API required.
Pages are simply JavaScript components. There is nothing particularly special about them. Pages receive data from the controllers as props. Here's an example of a simple page component.
<template>
<Layout>
<Head title="Welcome" />
<h1>Welcome</h1>
<p>Hello {{ user.name }}, welcome to your first Inertia app!</p>
</Layout>
</template>
<script>
import Layout from './Layout'
import { Head } from '@inertiajs/inertia-vue3'
export default {
components: {
Head,
Layout,
},
props: {
user: Object,
},
}
</script>While not required, for most projects it makes sense to create a site layout that your pages can extend. Notice in our page example above that we're wrapping the page content within a <layout> component. Here's an example of such a component. There is nothing Inertia specific here. This is just a standard JavaScript component.
<template>
<main>
<header>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
<Link href="/contact">Contact</Link>
</header>
<article>
<slot />
</article>
</main>
</template>
<script>
import { Link } from '@inertiajs/inertia-vue3'
export default {
components: {
Link,
}
}
</script>While it's simple to implement layouts as children of the page components, it does force the layout instance to be destroyed and recreated between visits. This means you cannot have persistent layout state when navigating between pages.
For example, maybe you have an audio player on a podcast website that you want to continue playing as users navigate the site. Or, maybe you simply want to maintain the scroll position in your navigation between page visits. In these situations, using the persistent layouts feature in Inertia is a better choice.
<template>
<div>
<H1>Welcome</H1>
<p>Hello {{ user.name }}, welcome to your first Inertia app!</p>
</div>
</template>
<script>
import Layout from './Layout'
export default {
// Using a render function
layout: (h, page) => h(Layout, () => child),
// Using the shorthand
layout: Layout,
props: {
user: Object,
},
}
</script>You can also create more complex layout arrangements using nested layouts.
<template>
<div>
<H1>Welcome</H1>
<p>Hello {{ user.name }}, welcome to your first Inertia app!</p>
</div>
</template>
<script>
import SiteLayout from './SiteLayout'
import NestedLayout from './NestedLayout'
export default {
// Using a render function
layout: (h, page) => {
return h(SiteLayout, () => h(NestedLayout, () => page))
},
// Using the shorthand
layout: [SiteLayout, NestedLayout],
props: {
user: Object,
},
}
</script>If you're using persistent layouts, it's possible to set a default page layout in the resolve callback.
import Layout from './Layout'
createInertiaApp({
resolve: name => {
const page = require(`./Pages/${name}`).default
page.layout = page.layout || Layout
return page
},
// ...
})This will automatically set the page layout to Layout if a layout has not already been set for that page. If needed, you can disable the default layout on specific pages by setting the layout to null.
You can even go a step further and conditionally set the default page layout based on the page name, which is available to the resolve() method. For example, maybe you don't want the default layout applied to your public pages.
import Layout from './Layout'
createInertiaApp({
resolve: name => {
const page = require(`./Pages/${name}`).default
if (page.layout === undefined && !name.startsWith('Public/')) {
page.layout = Layout
}
return page
},
// ...
})