Nuxt/docs/3.api/5.kit/8.layout.md
Sébastien Chopin f26a801775
docs: update to new website (#23743)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Daniel Roe <daniel@roe.dev>
2023-10-18 12:59:43 +02:00

2.3 KiB

title description links
Layout Nuxt Kit provides a set of utilities to help you work with layouts.
label icon to size
Source i-simple-icons-github https://github.com/nuxt/nuxt/blob/main/packages/kit/src/layout.ts xs

Layouts is used to be a wrapper around your pages. It can be used to wrap your pages with common components, for example, a header and a footer. Layouts can be registered using addLayout utility.

addLayout

Register template as layout and add it to the layouts.

::callout In Nuxt 2 error layout can also be registered using this utility. In Nuxt 3 error layout replaced with error.vue page in project root. ::

Type

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

interface NuxtTemplate {
  src?: string
  filename?: string
  dst?: string
  options?: Record<string, any>
  getContents?: (data: Record<string, any>) => string | Promise<string>
  write?: boolean
}

Parameters

layout

Type: NuxtTemplate | string

Required: true

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:

  • src (optional)

    Type: string

    Path to the template. If src is not provided, getContents must be provided instead.

  • filename (optional)

    Type: string

    Filename of the template. If filename is not provided, it will be generated from the src path. In this case, the src option is required.

  • dst (optional)

    Type: string

    Path to the destination file. If dst is not provided, it will be generated from the filename path and nuxt buildDir option.

  • options (optional)

    Type: Options

    Options to pass to the template.

  • getContents (optional)

    Type: (data: Options) => string | Promise<string>

    A function that will be called with the options object. It should return a string or a promise that resolves to a string. If src is provided, this function will be ignored.

  • write (optional)

    Type: boolean

    If set to true, the template will be written to the destination file. Otherwise, the template will be used only in virtual filesystem.