Introduction to Layouts
Explore how NuxtJS layouts serve as reusable UI templates to maintain consistent page structures with common elements like headers and footers. Learn to define default and custom layouts, use the NuxtLayout component, and position content with the <slot/> tag in your server-side rendered Vue applications.
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, in ...