Learn Nuxt with a Collection of 100+ Tips!

<NuxtLayout>

Nuxt предоставляет компонент <NuxtLayout> для отрисовки лейаута на страницах и страницах с ошибками.

Вы можете использовать компонент <NuxtLayout />, чтобы активировать лейаут default в app.vue или error.vue.

app.vue
<template>
  <NuxtLayout>
    некоторое содержимое страницы
  </NuxtLayout>
</template>
Узнать больше Docs > Guide > Directory Structure > Layouts.

Входные параметры

  • name: Укажите имя лейаута, который будет отображаться, это может быть строка, реактивная ссылка или вычисляемое свойство. Оно должно совпадать с именем соответствующего файла лейаута в директории layouts/.
    • тип: string
    • по умолчанию: default
pages/index.vue
<script setup lang="ts">
// layouts/custom.vue
const layout = 'custom'
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>
Пожалуйста, обратите внимание, что имя лейаута нормализовано в kebab-case; если ваш файл лейаута называется errorLayout.vue, он станет error-layout при передаче в качестве свойства name в <NuxtLayout />.
error.vue
<template>
  <NuxtLayout name="error-layout">
    <NuxtPage />
  </NuxtLayout>
</template>
Узнать больше о динамических лейаутах.
  • fallback: Если во входной параметр name передан недействительный лейаут, то он не будет отрендерен. Укажите лейаут fallback, который будет отображаться в таком случае. Он должен совпадать с именем соответствующего файла лейаута в директории layouts/.
    • тип: string
    • по умолчанию: null

Дополнительные входные параметры

NuxtLayout также принимает любые дополнительные входные параметры, которые могут потребоваться для передачи в лейаут. Затем эти пользовательские входные параметры доступны в виде атрибутов.

pages/some-page.vue
<template>
  <div>
    <NuxtLayout name="custom" title="Я - пользовательский лейаут">
      <-- ... -->
    </NuxtLayout>
  </div>
</template>

В приведенном выше примере значение title будет доступно с помощью $attrs.title в template или useAttrs().title в <script setup> в custom.vue.

layouts/custom.vue
<script setup lang="ts">
const layoutCustomProps = useAttrs()

console.log(layoutCustomProps.title) // Я - пользовательский лейаут
</script>

Transitions

<NuxtLayout /> рендерит входящий контент через <slot />, который затем оборачивается вокруг компонента Vue <Transition />, чтобы активировать переход лейаута. Чтобы это работало должным образом, рекомендуется, чтобы <NuxtLayout /> не был корневым элементом компонента страницы.

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header> Некоторое содержимое шаблона хедера. </template>
    </NuxtLayout>
  </div>
</template>
Узнать больше Docs > Getting Started > Transitions.

Ссылка на лейаут

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

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

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

<template>
  <NuxtLayout ref="layout">
    лейаут по умолчанию
  </NuxtLayout>
</template>
Узнать больше Docs > Guide > Directory Structure > Layouts.