Nuxt3中如何高效使用布局（layouts）和NuxtLayout进行页面布局设计？

本文共计1400个文字，预计阅读时间需要6分钟。

Nuxt3是一个基于Vue3的开发框架，支持服务器端渲染SSR，可增强Vue的SEO优化。使用Nuxt3+SSR模式开发的网站，渲染和运行速度非常快，性能高，同时支持SEO。

Nuxt3是基于Vue3的一个开发框架，基于服务器端渲染SSR，可以更加方便的用于Vue的SEO优化。

用Nuxt3 SSR模式开发出来的网站，渲染和运行速度非常快，性能也非常高，而且可SEO。

接下来我主要给大家讲解下Nuxt3的layouts布局目录如何使用的，以及搭配NuxtLayout怎么使用的。

先看下我们例子的目录：

layouts目录一般是用于页面的公共部分，例如共有的头部菜单导航、底部Footer、侧面导航菜单等。布局是围绕包含多个页面的公共用户界面的页面的包装器，例如页眉和页脚显示。布局是使用<slot />组件显示页面内容的Vue文件。默认情况下使用layouts/default.vue文件。自定义布局可以设置为页面元数据的一部分。

我们这里以下图这个普通页面为例：

红色圈出来部分为公用部分，我们提取到layouts里，然后在pages里首页（index.vue）和关于页面（about.vue）里进行引入。