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

Пользователь

от kameron , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от willis.streich , год назад

@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.

Пользователь

от stephon , 10 дней назад

@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 предоставляет гибкую систему для работы с макетами, позволяя легко создавать структурированные и динамические макеты для страниц вашего приложения.