layouts

Включение лейаутов

Лейауты включаются путем добавления <NuxtLayout> в ваш app.vue:

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

Чтобы использовать лейаут:

• Установите свойство layout на вашей странице с помощью definePageMeta.
• Установите свойство name для <NuxtLayout>.

Лейаут по умолчанию

Добавьте ~/layouts/default.vue:

<template>
  <div>
    <p>Некоторый контент лейаута по умолчанию, общий для всех страниц</p>
    <slot />
  </div>
</template>

В файле лейаута содержимое страницы будет отображаться в компоненте <slot />.

Именованный лейаут

-| layouts/
---| default.vue
---| custom.vue

Затем вы можете использовать лейаут custom на своей странице:

<script setup lang="ts">
definePageMeta
({
  
layout
: 'custom'
})
</script>

Вы можете напрямую переопределить лейаут по умолчанию для всех страниц, используя свойство name <NuxtLayout>:

<script setup lang="ts">
// Вы можете сделать выбор на основе вызова API или статуса входа в систему.
const layout = "custom";
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

Если у вас есть лейаут во вложенных директориях, имя лейаута будет основано на пути к нему и имени файла, при этом дублирующиеся сегменты будут удалены.

Для ясности мы рекомендуем, чтобы имя файла лейаута совпадало с его именем:

Динамическое изменение лейаута

Вы также можете использовать хелпер setPageLayout для динамического изменения лейаута:

<script setup lang="ts">
function 
enableCustomLayout
 () {
  
setPageLayout
('custom')
}
definePageMeta
({
  
layout
: false,
});
</script>

<template>
  <
div
>
    <
button
 @
click
="
enableCustomLayout
">Обновить лейаут</
button
>
  </
div
>
</template>

Переопределение лейаута на постраничной основе

Если вы используете страницы, вы можете получить полный контроль, установив layout: false, а затем используя компонент <NuxtLayout> на странице.

<script setup lang="ts">
definePageMeta({
  layout: false,
})
</script>

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header> Некоторое содержимое шаблона заголовка. </template>

      Остальная часть страницы
    </NuxtLayout>
  </div>
</template>