通过 100+ 个技巧学习 Nuxt!

布局

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,则模板将写入目标文件。否则,模板将仅在虚拟文件系统中使用。