Лейаут

Исходный код
Nuxt Kit предоставляет утилиты для регистрации лейаутов из модулей.

Лейаут — обёртка вокруг страниц: общий каркас из повторяющихся блоков (шапка, подвал и т.д.). Зарегистрировать лейаут из модуля можно через addLayout.

addLayout

Регистрирует шаблон как именованный лейаут приложения.

В Nuxt 2 лейаут error также может быть зарегистрирован с помощью этой утилиты. В Nuxt 3+ лейаут errorзаменён на страницу error.vue в корне проекта.

Использование

import { 
addLayout
, 
createResolver
, 
defineNuxtModule
 } from '@nuxt/kit'

export default 
defineNuxtModule
({
  
setup
 () {
    const { 
resolve
 } = 
createResolver
(import.meta.
url
)

    
addLayout
({
      
src
: 
resolve
('templates/custom-layout.ts'),
      
filename
: 'custom-layout.ts',
    }, 'custom')
  },
})

Тип

function addLayout (layout: NuxtTemplate | string, name: string): void

Параметры

layout: объект шаблона или строка с путём к шаблону. Строка превращается в объект с полем src. У объекта шаблона возможны поля:

СвойствоТипОбязательноОписание
srcstringfalseПуть к шаблону. Если нет src, нужен getContents.
filenamestringfalseИмя файла шаблона. Если не задано, выводится из src (тогда src обязателен).
dststringfalseПуть назначения. Если не задан, строится из filename и buildDir Nuxt.
optionsRecord<string, any>falseОпции, передаваемые в шаблон.
getContents(data) => string | Promise<string>falseФункция с объектом options, возвращающая строку или Promise со строкой. Если задан src, не используется.
writebooleanfalseПри true шаблон записывается на диск; иначе доступен только через виртуальную файловую систему.

name: имя лейаута для definePageMeta и т.п. (default, custom и др.).

Пример

Ниже регистрируется лейаут custom с шапкой и подвалом.

import { 
addLayout
, 
defineNuxtModule
 } from '@nuxt/kit'

export default 
defineNuxtModule
({
  
setup
 () {
    
addLayout
({
      
write
: true,
      
filename
: 'my-layout.vue',
      
getContents
: () => `<template>
  <div>
    <header>Мой заголовок</header>
    <slot />
    <footer>Мой подвал</footer>
  </div>
</template>`,
    }, 'custom')
  },
})

Этот лейаут можно указать на страницах:

pages/about.vue
<script setup lang="ts">
definePageMeta({
  layout: 'custom',
})
</script>

<template>
  <div>Страница «О нас»</div>
</template>
Так как @vitejs/plugin-vue не подхватывает виртуальные .vue, для лейаутов на Vue задайте в первом аргументе addLayout опцию write: true.