Другой макет сайта в Nuxt

Одного макета по умолчанию часто мало. У админки другая шапка, другие отступы, иногда иной фон. В Nuxt каждый такой вариант - отдельный файл в app/layouts. Имя файла без .vue становится именем макета при подключении.

Давайте добавим макет для служебной зоны с другой английской шапкой:

<template>
	<div>
		<header>
			Admin
		</header>
		<slot />
	</div>
</template>

Пока в app.vue стоит обычный NuxtLayout без параметров, работает default.vue. Чтобы увидеть новый файл в действии, укажем имя макета у NuxtLayout:

<template>
	<NuxtLayout name="admin">
		<NuxtPage />
	</NuxtLayout>
</template>

Тогда на всех адресах вместо Site в шапке будет Admin, а содержимое страниц по-прежнему попадёт в слот. Такой способ удобен для проверки файла макета, но он переключает оболочку сразу для всего приложения.

Когда нужен другой макет только на одной странице, а остальные остаются на default.vue, имя на NuxtLayout в app.vue не подходит - задают макет в самом файле страницы.

Создайте макет admin.vue с английской шапкой Admin.

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