Макеты

Исходники
Утилиты Nuxt Kit для работы с макетами.

Макеты — обёртка вокруг страниц с общими элементами (шапка, подвал и т.д.). Регистрация через утилиту addLayout.

addLayout

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

В Nuxt 2 макет error тоже регистрировался через эту утилиту. В Nuxt 3+ макет ошибки заменён на страницу 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. Объект может содержать:

СвойствоТипОбязательныйОписание
srcstringнетПуть к шаблону. Если не задан — нужен getContents.
filenamestringнетИмя файла шаблона. По умолчанию из src (тогда src обязателен).
dststringнетПуть к целевому файлу. По умолчанию из filename и buildDir.
optionsRecord<string, any>нетДанные для шаблона.
getContents(data) => string | Promise<string>нетФункция, возвращающая содержимое. При заданном src не используется.
writebooleanнетtrue — записать в файл; иначе только в виртуальную ФС.

name: имя макета при регистрации (например default, custom).

Пример

Регистрация макета custom с шапкой и подвалом:

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

export default 
defineNuxtModule
({
  
setup
 () {
    
addLayout
({
      
write
: true,
      
filename
: 'my-layout.vue',
      
getContents
: () => `<template>
  <div>
    <header>My Header</header>
    <slot />
    <footer>My Footer</footer>
  </div>
</template>`,
    }, 'custom')
  },
})

Использование макета на странице:

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

<template>
  <div>About Page</div>
</template>
@vitejs/plugin-vue не поддерживает виртуальные .vue файлы — передайте write: true в первом аргументе addLayout.