title: Nuxt.js - Add two layouts in page
body: <p>I am a beginner in <strong>Nuxt.js</strong> 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 <strong>settings bar</strong>.
  <br>In <strong>settings</strong> page i have 3 routes (see project structure here: <a href="https://i.stack.imgur.com/IQzAt.png" rel="nofollow noreferrer">image</a>):</p>
  <ol>
  <li>settings/avatar</li>
  <li>settings/account</li>
  <li>settings/about</li>
  </ol>
  <p>I want the <strong>Settings bar</strong> to be the same for three routes. I can add the Settings bar to all three child pages like: <code>layout: 'settings-bar'</code> but then could not set the Header layout. In my Vue project i only used in settings page: Settings bar component and below <code>&lt;router-view&gt;&lt;/router-view&gt;</code> to change the components. Any idea how i can do this? in docs can not find anything. See other screenshots here to better understand: <br></p>
  <p><a href="https://i.stack.imgur.com/Axk95.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Axk95.png" alt="project" /></a></p>