Макет одной страницы в Inertia

Давайте разберём постоянный макет страницы. Если обернуть содержимое тегом макета прямо в шаблоне, Vue уничтожит оболочку при каждом переходе и состояние шапки или плеера не сохранится. Inertia держит экземпляр макета отдельно, когда страница объявляет опцию layout.

Общий макет по умолчанию уже есть из настройки запуска. Отдельная страница может указать свой компонент макета, и он заменит значение по умолчанию только для этого адреса. Так делают экран входа без бокового меню или публичную витрину с другой шапкой.

Давайте создадим узкий макет без боковой колонки:

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

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

Давайте на странице входа укажем этот макет через defineOptions:

<script setup>
	import GuestLayout from '@/Layouts/GuestLayout.vue'

	defineOptions({
		layout: GuestLayout,
	})
</script>

<template>
	<h1>Login</h1>
</template>

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

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

	Route::get('/login', function () {
		return Inertia::render('Auth/Login');
	});
?>

Сделайте страницу регистрации работника Olga с отдельным макетом RegistrationLayout, где нет бокового меню кадров.