Знакомство с макетами layouts Nuxt

Директория layouts

Следующая директория, которую мы с вами рассмотрим, — это директория layouts (либо "макеты"). Эта директория содержит особые виды файлов, которые мы можем использовать как макеты для того, чтобы отображать какие-то повторяющиеся на многих страницах элементы.

Чаще всего это такие элементы, как шапка (header) и подвал (footer) нашего приложения. Также там может выводиться, например, боковая колонка. В зависимости от того, какой макет будет применяться для страницы, будут выводиться повторяющиеся блоки, отображаемые на данной странице.

Пример использования макета

Давайте попробуем это сделать.

Создаём директорию layouts, и во входном файле мы должны обернуть компонент NuxtPage в специальный компонент макета NuxtLayout. Именно это мы сейчас и сделаем. 

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

В документации приводится пример, что главным файлом компонента по умолчанию является default.vue. Нам нужно его создать, так как именно он будет использован компонентом для подстановки макета на всех страницах нашего проекта.

Создание макета

Теперь мы можем, например, создать элемент для подвала. Далее главная часть, где будет выводиться основное содержимое, то есть отображаемый компонент. Его нужно отобразить с помощью компонента <slot>.

<template>
  <header>Это шапка сайта</header>
  <slot />
  <footer>Это подвал</footer>
</template>

Результат

Теперь, если мы перейдём на любую страницу нашего проекта, вы увидите, что на каждой странице будет выводиться шапка и подвал. Макет — это повторяющаяся часть, куда мы можем подставлять содержимое для каждой страницы.