Nuxt.js: [Feature request]: Create nested Layouts

[cawa-93]

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>

_{This feature request is available on Nuxt.js community (#c2683)}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[cawa-93]

No no no! Activity! Wait answer!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[visualfanatic]

@cawa-93 how about just importing the sidebar component and passing <next /> in the default slot? Do you really need the sidebar to be a layout?

<template>
  <div class="header-template-root">
    <app-header></app-header>
    <main>
      <Sidebar><nuxt /></Sidebar>
    </main>
  </div>
</template>
<script>
import Sidebar from '~/components/Sidebar';

export default {
  components: {
    Sidebar,
  },
};
</script>

[cawa-93]

@visualfanatic I do not quite understand how your proposal solves this issue

[dugajean]

I second this request.

[profispojka]

Just import the outer layout as a component and extend it.

in outer layout use slot instead of nuxt and the default value inside slot make nuxt, like this:

<slot><nuxt/></slot>

then you can import layout and extend it, for example my error layout looks like this:

<div>
  <defaultLayout>
    <h1 v-if="isKnownError"> {{ $t(`messages.error[${error.statusCode}]`) }}
    <h1 v-else> {{ $t(`messages.error.generic`) }}
  </defaultLayout>
</div>

And specially for my colleague, another example in pug ;) Hi Jake!

outer layout:

    .onboarding-wrapper
      .container
        slot
          nuxt

inner layout:

    .wrap(:class="{ noMarginLeft }")
      // there could be for example sidebar, or something else
      nuxt
      img(src="/images/marketing-registration-done.png").register-image
...
import onboardingLayout from '...'
...
components: { onboardingLayout }
...

[kiuKisas]

With the profispojka solution, you seems to reload the defaultLayout when loading a page with onboardingLayout. I figure it out when I add animation to the Layout.
I find an other solutions, basted on parent and nuxt-child:

• working example there : https://github.com/dyanagi/nuxt-nested-routes-example
• doc here : https://nuxtjs.org/api/components-nuxt-child/