title: Sharing one header/footer between layouts in NuxtJS
body: <p>I have two layouts and one header and footer that I want to share between the two. I want to reduce duplication html markup. As it is  right now I have to import the header into both layouts. The problem here is that the header has state, and when that layout changes, the state seemingly gets reset. An example being using something like vuetify tabs.</p>
  <p>Edit: Better example.</p>
  <pre><code>header.vue
  |
  |_ _ layout 1 (with video)
  |
  |_ _ layout 2 (with parallax)
  |
  footer.vue
  </code></pre>
  <p>Both layouts have different body setups, but the same header. The problem with layouts is that switching from one layout to another causes the client to render everything again, which I don't necessarily want because it looks janky.</p>