Nuxt.js: How to write nested layout?

Created on 25 May 2017 · 5Comments · Source: nuxt/nuxt.js

I code like this:

// layout_0.vue
<template>
  <h1>Hello World</h1>
</template>

```html
// layout_1.vue

But it doesn't work.

_{This question is available on Nuxt.js community (#c673)}

Source

bluicezhen

Most helpful comment

Hi @bluicezhen, you should use a component in your layout.

// components/layout_0.vue
<template>
  <div>
     <h1>Hello World</h1>
     <slot/>
   </div>
</template>

// layouts/default.vue
<template>
    <my-layout>
      <nuxt />
      <h2>Hello China</h2>
    </my-layout>
</template>


md5-eb4ba7b712ff4a5a6f6c46e3a594e2f9

alexchopin on 25 May 2017

👍14 🎉2

All 5 comments

Hi, @bluicezhen! You should use html preprocessors, like pug

KonstantinVlasov on 25 May 2017

👎11 😄9

Hi @bluicezhen, you should use a component in your layout.

// components/layout_0.vue
<template>
  <div>
     <h1>Hello World</h1>
     <slot/>
   </div>
</template>

// layouts/default.vue
<template>
    <my-layout>
      <nuxt />
      <h2>Hello China</h2>
    </my-layout>
</template>


md5-eb4ba7b712ff4a5a6f6c46e3a594e2f9

alexchopin on 25 May 2017

👍14 🎉2

@alexchopin @bluicezhen I had hoped you could set a layout property on a layout, so you could extend upon any layout, but since they're not "supercharged" this understandably not possible.

To achieve the same sort of nesting structure, I did this (it's @alexchopin 's in reverse but you're able to call the layout directly in a supercharged page).

// layouts/default.vue
<template>
   <div class="layout__content">
       <nuxt v-if="!$slots.default" />
       <slot />
   </div>
</template>

// layouts/layout_0.vue
<template>
  <default-layout>
    <h1>Surrounding layout</h1>
    <nuxt />
  </default-layout>
</template>



md5-c07b38c0da756ad2f53ba8bde7ab0259

Mat-thieu on 18 Sep 2018

👍2 🎉1

If you required nested layout, we should import components to the single layout file. That is a possible thing, by the way, Nextjs also did not have nested layouts.