布局

源文件
Nuxt Kit 提供了一套实用工具来帮助你处理布局。

布局是页面的一种包装。它可用于将页面与常用组件（例如页眉和页脚）进行包装。布局可以使用 addLayout 实用工具进行注册。

addLayout

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

在 Nuxt 2 中，error 布局也可以使用此实用工具进行注册。在 Nuxt 3+ 中，error 布局已 替换 为项目根目录中的 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 设置为字符串值。如果提供模板对象，它必须具有以下属性

属性类型必需描述
srcstringfalse模板路径。如果未提供 src，则必须提供 getContents。
filenamestringfalse模板文件名。如果未提供 filename，它将从 src 路径生成。在这种情况下，src 选项是必需的。
dststringfalse目标文件路径。如果未提供 dst，它将从 filename 路径和 nuxt buildDir 选项生成。
optionsRecord<string, any>false要传递给模板的选项。
getContents(data) => string | Promise<string>false一个将使用 options 对象调用的函数。它应该返回一个字符串或解析为字符串的 Promise。如果提供了 src，此函数将被忽略。
writebooleanfalse如果设置为 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 的第一个参数来解决此限制。