Содержимое страницы в макете в Nuxt

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

Давайте оформим типичную схему - шапка, область страницы и подвал:

<template>
	<div>
		<header>
			Site
		</header>
		<main>
			<slot />
		</main>
		<footer>
			Footer
		</footer>
	</div>
</template>

Текст из файла страницы попадёт между шапкой и подвалом. Например, для главной:

<template>
	<p>
		Welcome to our site.
	</p>
</template>

Абзац из index.vue не дублирует Site и Footer - он подставляется только в main. На другом адресе в том же слоте будет другой шаблон страницы, а шапка и подвал останутся прежними.

Корневой файл по-прежнему связывает макет и страницу:

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

Добавьте в макет по умолчанию английский подвал с краткой подписью проекта.

Сделайте страницу /about, чтобы её абзац выводился между шапкой и подвалом макета.