Question

您可以使用 NuxtLayout 组件激活 `app.vue` 或 `error.vue` 上的 `default` 布局。

NuxtLayout

<NuxtLayout /> 可用于覆盖 app.vue、error.vue 甚至位于 /pages 目录中的页面组件上的 default 布局。

/app.vue

<template>
  <NuxtLayout>
    some page content
  </NuxtLayout>
</template>

name prop

<NuxtLayout /> 组件接受 name 属性，您可以传递该属性以使用非默认布局，其中 name 可以是静态字符串、反应性引用或计算属性。

它必须匹配/layouts目录中相应布局文件的名称。

示例

<NuxtLayout /> 通过 <slot /> 呈现传入的内容，然后包裹在 Vue 的 <Transition /> 组件周围以激活布局转换。

为使其按预期工作，建议<NuxtLayout /> 不是页面组件的根元素。

pages/index.vue

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header> 一些标题模板内容。 </template>
    </NuxtLayout>
  </div>
</template>

相关阅读：dirs > layouts