Home

It would be nice enough to be able to create layouts that would imitate other layouts. Let’s say this:

\---layout
    |   default.vue
    |
    \---header
            index.vue
            full-width.vue
            sidebar.vue

In the /layout/header/index.vue we create the base with header:

<template>
  <div class="header-template-root">
    <app-header></app-header>
    <main>
      <nuxt/>
    </main>
  </div>
</template>

Next, we complement this layout in an nested /layout/header/sidebar.vue:

<template>
  <div class="sidebar-template-root">
    <aside>
      <!-- -->
    </aside>
    <article>
      <nuxt/>
    </article>
  </div>
</template>

Finally, we use this layout on the page

<template>
  <p>Page content ...</p>
</template>

<script>
  export default {
    layout: 'header/sidebar'
  }
</script>

As a result, we will get a page with the following code:

<div  class="header-template-root">
  <app-header></app-header>
  <main>
    <div class="sidebar-template-root">
      <aside>
        <!-- -->
      </aside>
      <article>
        <p>Page content ...</p>
      </article>
    </div>
  </main>
</div>