Introduction to Layouts
Learn how to create reusable UI templates using Nuxt layouts.
A Nuxt layout is a reusable UI template that defines the overall structure of a web page in a Nuxt application. It acts as a wrapper around the pages of the application, providing a consistent look across multiple pages. A layout can include components, navigation menus, headers, footers, and other UI elements.
Layouts in Nuxt are defined as Vue components and can be easily applied to pages and components to provide consistent styling throughout the application.
The layouts directory
The layouts directory, located in the application’s root directory, is where layouts used in the application are stored. Defining a layout in this directory would register it for use across the application.
Example
In the SPA below, a custom layout named custom.vue is defined in the layouts directory. Notice how the layout is used in the home page pages/index.vue ...