布局
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 设置为字符串值。如果提供的是模板对象，它必须具有以下属性：
| 属性 | 类型 | 必需 | 描述 |
|---|---|---|---|
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 的布局，用于用页眉和页脚包装页面。
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')
},
})
然后您可以在页面中使用此布局：
pages/about.vue
<script setup lang="ts">
definePageMeta({
layout: 'custom',
})
</script>
<template>
<div>关于页面</div>
</template>
由于 @vitejs/plugin-vue 不支持虚拟 .vue 文件，您可以通过将 write: true 传递给 addLayout 的第一个参数来解决此限制。