Именованные макеты в Inertia

Пусть каркас приложения состоит из внешней оболочки и внутренней области контента. Заголовок темы относится к сайту, а отступы и плотность блоков - к внутреннему слою. Массив макетов не даёт обратиться к одному уровню по имени.

Опция layout может быть объектом: ключ - имя слоя, значение - компонент макета. Inertia вкладывает их друг в друга и запоминает имена. Функция setLayoutProps принимает имя первым аргumentом и меняет пропсы только у выбранного макета.

Давайте опишем два именованных компонента и укажем их на странице:

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

	defineOptions({
		layout: {
			app: AppLayout,
			content: ContentLayout,
		},
	})
</script>

<template>
	<h1>Reports</h1>
</template>

Давайте сменим пропсы только у внутреннего слоя content:

<script setup>
	import { setLayoutProps } from '@inertiajs/vue3'
	import AppLayout from '@/Layouts/AppLayout.vue'
	import ContentLayout from '@/Layouts/ContentLayout.vue'

	defineOptions({
		layout: {
			app: AppLayout,
			content: ContentLayout,
		},
	})

	setLayoutProps('content', {
		padding: 'sm',
	})
</script>

<template>
	<h1>Reports</h1>
</template>

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