Layout

Nuxt Kit 提供了一系列工具，帮助你处理布局。

布局（Layout）充当页面的外层包裹。它可以用于为页面包裹公共组件，例如 header 和 footer。布局可以使用 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 设为该字符串值的模板对象。如果提供的是模板对象，它必须包含以下属性：

属性	类型	必填	描述
`src`	`string`	`false`	模板的路径。如果未提供 `src`，则必须改为提供 `getContents`。
`filename`	`string`	`false`	模板的文件名。如果未提供 `filename`，它会根据 `src` 路径生成。这种情况下，`src` 选项是必需的。
`dst`	`string`	`false`	目标文件的路径。如果未提供 `dst`，它会根据 `filename` 路径和 nuxt `buildDir` 选项生成。
`options`	`Record<string, any>`	`false`	传给模板的选项。
`getContents`	`(data) => string \| Promise<string>`	`false`	一个会接收 `options` 对象的函数。它应返回一个字符串，或解析为字符串的 promise。如果提供了 `src`，该函数会被忽略。
`write`	`boolean`	`false`	如果设为 `true`，模板会被写入目标文件。否则，模板仅用于虚拟文件系统。

name：用于注册布局的名称（例如 default、custom 等）。

示例

这会注册一个名为 custom 的布局，用 header 和 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')
  },
})

然后你可以在页面中使用这个布局：

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 的第一个参数来解决这个限制。 :