How does Nuxt.js layout system work and how to create and use custom layouts?

Nuxt.js provides a powerful layout system that allows developers to create reusable layout components for applications, improving code reusability and consistency.

How the layout system works:

1. Default layout

   • Nuxt.js uses layouts/default.vue as the main layout for the application by default
   • All page components use this layout by default unless another layout is specified

2. Layout file structure

   • Layout files are stored in the layouts directory
   • Each layout file is a Vue component that must contain the <nuxt /> component to display page content

3. Layout usage

   • Specify the layout to use in page components via the layout property
   • Layout components wrap page components, providing a consistent page structure

Creating and using custom layouts:

1. Creating layout files

   • Create new layout files in the layouts directory, such as layouts/auth.vue
   • Layout files must contain the <nuxt /> component to display page content

2. Basic layout structure

vue
<!-- layouts/auth.vue -->
<template>
  <div class="auth-layout">
    <header>Authentication Page</header>
    <main>
      <nuxt />
    </main>
  </div>
</template>

1. Using layouts in pages

vue
<!-- pages/login.vue -->
<template>
  <div>Login page content</div>
</template>

<script>
export default {
  layout: 'auth' // Specify using auth layout
}
</script>

1. Layout lifecycle

   • Layout components have full Vue lifecycle hooks
   • The layout component's fetch method executes before the page's fetch method
   • Layout components can access the $route object and adjust layout based on route changes

2. Dynamic layouts

   • Can dynamically select layouts based on conditions
   • For example, display different layouts based on user permissions

Advanced layout usage:

1. Nested layouts

   • Can use other components in layouts to implement complex layout structures
   • Can achieve nested layouts through the component's layout property

2. Layout transition effects

   • Can add transition animations to layouts to improve user experience
   • Wrap <nuxt /> with Vue's <transition> component

3. Layout middleware

   • Can add middleware to layouts to handle logic such as permission validation

4. Layout data passing

   • Can pass data between layouts and pages through props or $store

Best practices:

• Create specialized layouts for different types of pages (e.g., authentication pages, admin backend, frontend pages)
• Use layout components appropriately to reduce code duplication
• Keep layout structures simple and avoid excessive nesting
• Use layout lifecycle hooks to handle global logic
• Add appropriate transition effects to layouts to improve user experience

Notes:

• Layout files must contain the <nuxt /> component, otherwise page content will not display
• Layout component names should match file names (excluding .vue extension)
• The layout's asyncData method will not be called, use fetch method to get data