Лейаут

Лейауты используются в качестве обертки вокруг ваших страниц. Они могут использоваться для оборачивания страниц общими компонентами, например, хедером и футером. Лейауты могут быть зарегистрированы с помощью утилиты addLayout.

addLayout

Зарегистрируйте шаблон как лейаут и добавьте его в лейауты.

Usage

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')
  },
})

Type

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

Параметры

layout: A template object or a string with the path to the template. If a string is provided, it will be converted to a template object with src set to the string value. If a template object is provided, it must have the following properties:

name: The name to register the layout under (e.g., default, custom, etc.).

Example

This will register a layout named custom that wraps pages with a header and footer.

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')
  },
})

You can then use this layout in your pages:

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

<template>
  <div>About Page</div>
</template>