<NuxtLayout>

Компонент <NuxtLayout /> подключает макет по умолчанию в app.vue или error.vue.

<template>
  <NuxtLayout>
    контент страницы
  </NuxtLayout>
</template>

Пропсы

• name: имя макета для отображения (строка, ref или computed). Должно совпадать с именем файла в app/layouts/ или false, чтобы отключить макет.
  • тип: string | false
  • по умолчанию: default

<script setup lang="ts">
// layouts/custom.vue
const layout = 'custom'
</script>

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

<template>
  <NuxtLayout name="error-layout">
    <NuxtPage />
  </NuxtLayout>
</template>

• fallback: макет, который рендерится, если в name передан несуществующий. Должен совпадать с именем файла в app/layouts/.
  • тип: string
  • по умолчанию: null

Дополнительные пропсы

В <NuxtLayout> можно передать любые пропсы — они будут доступны в макете как атрибуты.

<template>
  <div>
    <NuxtLayout
      name="custom"
      title="I am a custom layout"
    >
      <!-- ... -->
    </NuxtLayout>
  </div>
</template>

В примере выше title доступен в макете как $attrs.title в шаблоне или useAttrs().title в <script setup>.

<script setup lang="ts">
const layoutCustomProps = useAttrs()

console.log(layoutCustomProps.title) // I am a custom layout
</script>

Переходы

<NuxtLayout /> renders incoming content via <slot />, which is then wrapped around Vue’s <Transition /> component to activate layout transition. Чтобы переходы работали, <NuxtLayout /> не должен быть корневым элементом страницы.

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header>
        Контент шапки макета.
      </template>
    </NuxtLayout>
  </div>
</template>

<template>
  <div>
    <!-- именованный слот -->
    <slot name="header" />
    <slot />
  </div>
</template>

Ref макета

Чтобы получить ref компонента макета, используйте ref.value.layoutRef.

<script setup lang="ts">
const layout = ref()

function logFoo () {
  layout.value.layoutRef.foo()
}
</script>

<template>
  <NuxtLayout ref="layout">
    default layout
  </NuxtLayout>
</template>

<script setup lang="ts">
const foo = () => console.log('foo')
defineExpose({
  foo,
})
</script>

<template>
  <div>
    default layout
    <slot />
  </div>
</template>