Макет в Inertia

Давайте разберём макет страницы. Макет - это общая рамка сайта: шапка, меню, подвал. Страница попадает в его слот и рисует только своё содержимое. Один макет на всё приложение задают при запуске клиента, опцией layout. Рамка живёт между переходами и не копируется в каждый файл.

Давайте создадим файл макета с навигацией и основной областью:

<script setup>
	import { Link } from '@inertiajs/vue3'
</script>

<template>
	<header>
		<Link href="/">Home</Link>
		<Link href="/posts">Posts</Link>
	</header>
	<main>
		<slot />
	</main>
</template>

Давайте при запуске приложения укажем этот макет:

import { createInertiaApp } from '@inertiajs/vue3'
import Layout from './Layout.vue'

createInertiaApp({
	layout: () => Layout,
})

Страница постов остаётся только с заголовком, без обёртки:

<template>
	<h1>Posts</h1>
</template>

Маршрут по-прежнему отдаёт только имя компонента:

<?php
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts', function () {
		return Inertia::render('Posts/Index');
	});
?>

Сделайте общий макет с шапкой и подвалом, чтобы страницы работников и отделов открывались внутри него.