Modifying the default layout

The default layout is always used for pages that don't have a specific or custom layout. If you go to the /layouts/ directory and open this layout, you should see that there are only three lines of code in it for rendering your page component:

// layouts/default.vue
<template>
  <nuxt/>
</template>

Let's modify this default layout, as follows:

// layouts/default.vue
<template>
  <div>
    <div>...add a navigation bar here...</div>
    <nuxt/>
  </div>
</template>

You should see whatever you added there – for example, a navigation bar across all the pages in your app. Note that whether you are modifying this layout or creating new ones, make sure you have the <nuxt/> component where you want Nuxt to import the page component. Let's explore how you can create custom layouts in the next section.