Как создавать макеты (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.

@kameron 

Дополню ответ. Возможно использование динамических макетов в Nuxt.js. Для этого можно использовать специальное свойство "layout" в файле компонента страницы. Например, если вы хотите, чтобы макет страницы изменялся в зависимости от каких-то условий, вы можете динамически указать нужный макет.

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

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

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

<script>
export default {
  layout: context => {
    // Динамическое определение макета
    if (context.route.path === '/about') {
      return 'aboutLayout'
    } else {
      return 'default'
    }
  }
}
</script>

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

Таким образом, Nuxt.js предоставляет гибкую систему для работы с макетами, позволяя легко создавать структурированные и динамические макеты для страниц вашего приложения.