Главное меню сайта в Nuxt

Отдельная ссылка на странице решает локальную задачу, но на сайте почти всегда нужно одно и то же меню: главная, каталог, контакты. Повторять разметку в каждом файле pages неудобно, и при смене пункта пришлось бы править много мест сразу.

Общие части интерфейса выносим в макет. Файл app/layouts/default.vue описывает оболочку по умолчанию: сверху навигация, ниже - содержимое текущей страницы в слоте. Корневой app/app.vue оборачивает NuxtPage в NuxtLayout, и тогда каждая страница автоматически получает этот макет.

Файлы app/pages/index.vue, catalog.vue и contacts.vue должны существовать, чтобы пункты меню вели на реальные адреса. При переходе между ними блок nav остаётся на месте, а в слоте меняется только страница - именно для этого мы используем NuxtLink, а не обычные теги a на свой домен. Список ссылок можно оформить списком ul и li или оставить в строку внутри nav.

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

<template>
	<div>
		<nav>
			<NuxtLink to="/">
				Home
			</NuxtLink>
			<NuxtLink to="/catalog">
				Catalog
			</NuxtLink>
			<NuxtLink to="/contacts">
				Contacts
			</NuxtLink>
		</nav>
		<slot />
	</div>
</template>

Дополните макет пунктами меню Workers и Departments с переходами на /workers и /departments.