Макеты

Макет (layout) — компонент-обёртка с повторяющимися частями сайта: шапкой, меню, подвалом. Страница выводится внутри макета, поэтому шапку не нужно копировать в каждый файл. Макеты лежат в папке app/layouts/.

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

Создайте макет командой:

npx nuxi add layout default

Появится файл app/layouts/default.vue. Перенесите в него шапку из app.vue:

<!-- app/layouts/default.vue -->
<template>
  <div>
    <header>
      <nav>
        <NuxtLink to="/">Главная</NuxtLink>
        <NuxtLink to="/posts">Статьи</NuxtLink>
        <NuxtLink to="/about">О блоге</NuxtLink>
      </nav>
    </header>
    <main>
      <slot />
    </main>
    <footer>Блог Анны и Олега</footer>
  </div>
</template>

На место <slot /> попадёт текущая страница. Макет с именем default применяется ко всем страницам, у которых не выбран другой.

Подключение в app.vue

Макеты работают, только если app.vue оборачивает страницы в <NuxtLayout>:

<!-- app/app.vue -->
<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

Откройте любую страницу: сверху меню, снизу подвал, между ними — содержимое страницы.

Второй макет

Для раздела управления блогом нужна другая обёртка — без подвала и с другим меню. Создайте app/layouts/admin.vue:

<!-- app/layouts/admin.vue -->
<template>
  <div class="admin">
    <header>
      <strong>Управление блогом</strong>
      <NuxtLink to="/">На сайт</NuxtLink>
    </header>
    <slot />
  </div>
</template>

Сам по себе макет никуда не подключается: страница должна его выбрать.

Выбор макета на странице

Страница выбирает макет функцией definePageMeta. Создайте app/pages/admin.vue:

<!-- app/pages/admin.vue -->
<script setup lang="ts">
definePageMeta({
  layout: 'admin'
})
</script>
 
<template>
  <section>
    <h2>Панель управления</h2>
  </section>
</template>

По адресу /admin будет макет admin, на остальных страницах — default. Значение layout: false отключает макет совсем.

Что даёт definePageMeta

definePageMeta описывает настройки страницы, которые Nuxt читает ещё при сборке. Кроме макета, в ней указывают проверки перед входом на страницу — о них будет урок про middleware. Внутри неё нельзя использовать переменные компонента: только готовые значения.

Частая ошибка

Файл app/layouts/default.vue создан, а шапка не появилась. Почти всегда причина в app.vue: в нём нет <NuxtLayout>, и Nuxt выводит страницу без обёртки. Проверьте, что <NuxtPage /> стоит внутри <NuxtLayout>, и уберите старую шапку из app.vue, чтобы она не выводилась дважды.