Как создавать макеты (layouts) в Nuxt.js?

@kameron 

В Nuxt.js для создания макетов (layouts) используется специальная директория layouts, которая находится в корне проекта.

Чтобы создать новый макет, необходимо создать новый файл в директории layouts. Например, для создания макета с названием default, можно создать файл layouts/default.vue. В этом файле можно использовать компоненты Vue.js для создания макета страницы.

Пример кода для создания простого макета:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<template>
  <div>
    <header>
      <!-- Компонент шапки сайта -->
      <SiteHeader />
    </header>

    <main>
      <!-- Содержимое страницы -->
      <nuxt />
    </main>

    <footer>
      <!-- Компонент футера сайта -->
      <SiteFooter />
    </footer>
  </div>
</template>

В данном примере используется компонент <nuxt />, который представляет собой контейнер, в который Nuxt.js автоматически вставляет содержимое страницы при рендеринге.

После того как макет создан, его можно использовать для всех страниц сайта, либо для конкретных страниц, указав в их компоненте опцию layout. Например, если нужно использовать макет default для страницы about, можно создать файл pages/about.vue со следующим содержимым:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<template>
  <div>
    <h1>About Us</h1>
    <p>We are a company that specializes in making great products.</p>
  </div>
</template>

<script>
export default {
  layout: 'default'
}
</script>

В этом примере для страницы about будет использоваться макет default.