Nuxt.js - Add two layouts in page

Question

I am a beginner in Nuxt.js and I am converting a project of Vue to Nuxt.js and I wanted to use two layouts (the default one and another) on one page. The logic is this: The first layout is the (default) or header which is on all pages and the second layout is the settings bar.
In settings page i have 3 routes (see project structure here: image):

1. settings/avatar
2. settings/account
3. settings/about

I want the Settings bar to be the same for three routes. I can add the Settings bar to all three child pages like: layout: 'settings-bar' but then could not set the Header layout. In my Vue project i only used in settings page: Settings bar component and below <router-view></router-view> to change the components. Any idea how i can do this? in docs can not find anything. See other screenshots here to better understand:

Answer 1

It is actually doable to have nested layouts in Nuxt, meanwhile: it's a bit hacky and hard to read and I'm not sure that I may recommend it at a bigger scale. Tried it, do not recommend but if it's really needed, here is the solution.

layouts/default.vue

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

layouts/newLayout.vue

<template>
  <default-layout>
    <h1>Surrounding layout</h1>
    <nuxt />
  </default-layout>
</template>

<script>
import DefaultLayout from '~/layouts/default.vue';

export default {
  components: {
    DefaultLayout
  }
}
</script>

Then, you can use it anywhere with

<script>
export default {
  layout: 'newLayout' // name of your new layout
}
</script>

Kudos to this article: https://constantsolutions.dk/2020/02/nested-layouts-in-nuxt-vue-js/

Not sure, but the article itself may be from this github post: https://github.com/nuxt/nuxt.js/issues/785#issuecomment-422365721

Answer 2

There is no way to have multiple layouts on one page. However what you are describing could be managed with Child Components.