布局目录
布局在需要改变 Nuxt 应用程序的外观和感觉时非常有用，例如想要包含侧边栏或为移动端和桌面端设置不同布局时。
此目录不能在没有额外配置的情况下重命名
默认布局
通过添加 layouts/default.vue 文件可以设置主布局，这将用于所有未指定布局的页面。创建包含页面组件的布局时，请记得包含 <Nuxt> 组件。
布局只需要 3 行代码来渲染页面组件：
layouts/default.vue
<template>
<Nuxt />
</template>
也可以在这里添加导航、页头、页脚等组件：
layouts/default.vue
<template>
<div>
<TheHeader />
<Nuxt />
<TheFooter />
</div>
</template>
如果将 components 属性设为 true ，则无需 import 语句即可添加组件。
自定义布局
layout 目录中的所有文件（顶层）都会创建可在页面组件的 layout 属性中使用的自定义布局。
创建博客布局并保存为 layouts/blog.vue：
layouts/blog.vue
<template>
<div>
<div>My blog navigation bar here</div>
<Nuxt />
</div>
</template>
然后需要告诉页面使用自定义布局：
pages/posts.vue
<script>
export default {
layout: 'blog',
// OR
layout (context) {
return 'blog'
}
}
</script>
错误页面
错误页面是一个页面组件，在发生错误时始终显示（不是服务端发生的错误）。
此文件放在
layout 文件夹中，但应被视为页面。如上所述，此布局比较特殊，模板中不应包含 <Nuxt>。此布局必须作为发生错误时显示的组件（404、500 等）。与其他页面组件一样，可以用常规方式为错误页面设置自定义布局。
通过添加 layouts/error.vue 文件可以自定义错误页面：
layouts/error.vue
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">Page not found</h1>
<h1 v-else>An error occurred</h1>
<NuxtLink to="/">Home page</NuxtLink>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'blog' // 可以为错误页面设置自定义布局
}
</script>
默认错误页面的源代码可在 GitHub 上查看 。
Edit this page on GitHub
Updated at Tue, Apr 14, 2026