Макет по умолчанию в Nuxt

Давайте разберём, как в Nuxt устроен общий каркас сайта. Его хранят не в app.vue, а в отдельном компоненте внутри app/layouts. Имя файла совпадает с именем макета.

Файл default.vue - это макет по умолчанию. Nuxt подставляет его сам, когда для страницы не указан другой макет. Создадим минимальный вариант с общей шапкой на английском:

<template>
	<div>
		<header>
			Site
		</header>
		<slot />
	</div>
</template>

Тег slot в макете - место, куда попадёт текущая страница из app/pages. Без него текст страницы не отобразится внутри оболочки, хотя макет уже подключён.

Чтобы Nuxt использовал файлы из layouts, в корне приложения обернём вывод страницы в компонент NuxtLayout:

<template>
	<NuxtLayout>
		<NuxtPage />
	</NuxtLayout>
</template>

При переходе по адресам сначала рисуется default.vue, а содержимое NuxtPage оказывается на месте слота. Шапка Site будет видна на каждой странице, которая использует этот макет.

Сделайте макет по умолчанию с английской шапкой названия вашего проекта.

Подключите NuxtLayout в app.vue так, чтобы страницы из pages показывались внутри макета.