Стили макета в Nuxt

Шапка и навигация живут в app/layouts/default.vue и повторяются на каждом адресе. Их удобно стилизовать не локальным блоком style в макете, а классами из main.css - так все цвета и отступы меню собраны рядом с правилами для body.

Добавим в глобальный файл классы для шапки и блока ссылок:

body {
	font-family: sans-serif;
	margin: 0;
}

.site-header {
	padding: 1rem;
	background: #f0f0f0;
}

.site-nav {
	display: flex;
	gap: 1rem;
	padding: 0.75rem 1rem;
	background: #fafafa;
}

.site-nav a {
	text-decoration: none;
	color: #333;
}

Те же имена классов пропишем в разметке макета с меню из NuxtLink. При переходе между адресами меняется только содержимое слота, а оформление шапки и навигации остаётся из main.css:

<template>
	<div>
		<header class="site-header">
			My Shop
		</header>
		<nav class="site-nav">
			<NuxtLink to="/">
				Home
			</NuxtLink>
			<NuxtLink to="/catalog">
				Catalog
			</NuxtLink>
			<NuxtLink to="/contacts">
				Contacts
			</NuxtLink>
		</nav>
		<slot />
	</div>
</template>

Оформите шапку вашего макета отдельным классом в main.css.

Сделайте отступы между пунктами меню в глобальном файле стилей.