布局

Nuxt Kit 提供了一组工具,帮助你处理布局。

布局用于包装你的页面。它可以用来为页面添加通用组件,例如页头和页脚。布局可以通过 addLayout 工具进行注册。

addLayout

将模板注册为布局并将其添加到布局集合中。

在 Nuxt 2 中,error 布局也可以使用此工具注册。在 Nuxt 3+ 中,error 布局已被替换为项目根目录中的 error.vue 页面

类型

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
}

参数

layout

类型: NuxtTemplate | string

必填: true

模板对象或模板路径字符串。如果提供的是字符串,它将被转换为模板对象,并将 src 设置为该字符串值。如果提供的是模板对象,必须包含以下属性:

  • src(可选)
    类型: string
    模板的路径。如果未提供 src,则必须提供 getContents
  • filename(可选)
    类型: string
    模板的文件名。如果未提供 filename,将根据 src 路径生成。在这种情况下,src 选项是必需的。
  • dst(可选)
    类型: string
    目标文件的路径。如果未提供 dst,将根据 filename 路径和 Nuxt 的 buildDir 选项生成。
  • options(可选)
    类型: Options
    传递给模板的选项。
  • getContents(可选)
    类型: (data: Options) => string | Promise<string>
    一个函数,将使用 options 对象调用。它应返回一个字符串或解析为字符串的 Promise。如果提供了 src,此函数将被忽略。
  • write(可选)
    类型: boolean
    如果设置为 true,模板将被写入目标文件。否则,模板将仅在虚拟文件系统中使用。