Creating new custom layouts

Sometimes, we need more than one layout for a more complex app. We may need different layouts for certain pages. For a case like this, you will need to create custom layouts. You can create custom layouts with .vue files and just put them in the /layouts/ directory. Take the following example:

// layouts/about.vue
<template>
  <div>
    <div>...add an about navigation bar here....</div>
    <nuxt/>
  </div>
</template>

Then, you can use the layout property in the page component to assign this custom layout to that page, as follows:

// pages/about.vue
export default {
  layout: 'about'
  // OR
  layout (context) {
    return 'about'
  }
}

Nuxt now will use this /layouts/about.vue file as the base layout for this page component. But what about the layout for displaying error pages for unknown and invalid routes? Let's find out how this is made in the next section.