Nuxt 内置布局框架，用法如下：

修改 app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • NuxtLayout 为 Nuxt 的内置组件，默认加载 layouts/default.vue ，若页面中指定了布局，则加载对应的布局组件。
  • NuxtPage 为 Nuxt 的内置组件，默认加载 pages/index.vue，具体由页面路由决定。

命名布局

NuxtLayout 的 name 属性可以指定其他布局，如

<NuxtLayout name="shop">
    <NuxtPage />
  </NuxtLayout>
  • 1.
  • 2.
  • 3.

则 NuxtLayout 会默认加载 layouts/shop.vue

布局名称的规范化

布局名称会被规范化为 kebab-case，即 layouts/myShop.vue 的布局名为 my-shop

默认布局

在项目中新建目录 layouts，在 layouts 中新建文件 default.vue，内容为

<template>
  <div>
    <p>默认的页眉</p>
    <slot />
  </div>
</template>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 页面的内容，会在 slot 中渲染

自定义页面布局 definePageMeta

禁用布局

definePageMeta({
  layout: false,
});
  • 1.
  • 2.
  • 3.

使用指定的布局

definePageMeta({
  layout: "shop", // 指定的布局名
});
  • 1.
  • 2.
  • 3.

动态改变页面布局 setPageLayout

<button @click="changeLayout">更新布局</button>
  • 1.
function changeLayout() {
  setPageLayout("shop");
}
  • 1.
  • 2.
  • 3.

嵌套布局

页面中，也可直接使用 NuxtLayout 组件

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

      页面的其余部分
    </NuxtLayout>
  </div>
</template>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

但 NuxtLayout 通常不用作根元素，除非禁用了页面布局。

definePageMeta({
  layout: false,
});
  • 1.
  • 2.
  • 3.