布局

在 Nuxt 3 里，layouts/ 目录是用来定义页面布局（layout）的。

默认情况

存在layouts

默认情况下，Nuxt 会在 layouts/ 里寻找布局文件，并应用到 pages/ 页面。

不存在layouts

没有 layouts/ 目录时，Nuxt 会当作不需要布局。pages/ 下的页面会直接渲染在 app.vue 里的 <NuxtPage /> 里。 也就是说，页面不会再套上“外壳布局”，只显示页面自身内容。

app.vue

<template>
  <div>
    <h1>这里是全局 App.vue</h1>
    <NuxtPage />
  </div>
</template>

警告

如果您的应用程序中只有一种布局，建议使用app.vue与<NuxtPage>结合使用

layouts

目录结构示例：

layouts/
 ├─ default.vue   # 默认布局
 ├─ admin.vue     # 自定义布局
 └─ custom.vue    # 其他布局

layouts/default.vue

<template>
  <div>
    <header>这里是默认头部</header>
    <main>
      <slot /> <!-- 页面内容会插入到这里 -->
    </main>
    <footer>这里是默认底部</footer>
  </div>
</template>

所有页面如果没有指定布局，都会用 default.vue。

页面指定布局

在 pages/ 目录的页面文件里，可以通过 definePageMeta 来指定布局：

<script setup>
definePageMeta({
  layout: 'admin'   // 使用 layouts/admin.vue
})
</script>

<template>
  <h1>这是后台管理页面</h1>
</template>

这样，这个页面就会用 layouts/admin.vue 作为外壳。

禁用布局

如果某些页面（比如登录页、错误页）不需要任何布局，可以设置

<script setup>
definePageMeta({
  layout: false
})
</script>