Nuxt layouts not being added to routes

We've got a Nuxt setup with an auto-generated router.js. What I'm trying to achieve is a different layout for specific pages, with a different html structure. What I'm expecting to happen, is that the layout will be added to nuxt.config.js, as a meta tag (meta: { layout: 'newLayout' }).

What I did:

1. created the new layout file in /layouts/, newLayout.vue:

<template>
  <div class="testclass">
    <Top />
    <Header />
    <nuxt />
    <Footer />
  </div>
</template>

<script>
import Top from '~/components/Top.vue';
import Header from '~/components/Header.vue';
import Footer from '~/components/Footer.vue';
import init from '~/mixins/init';

export default {
  components: {
    Top,
    Header,
    Footer,
  },
  mixins: [init],
  mounted() {
    console.log('blep');
  },
};
</script>

2. Specified I wanted to use the new layout in the pages I need it in. I've tried both

   meta: {
       layout: 'newLayout',
   },

and just

    layout: 'newLayout',

3. I'm checking to see if anything shows up in router.js, but so far it doesn't. The correct layout isn't loaded either (naturally).

My file tree is as follows:

nuxt/
--| components/
--| layouts/
----| default.vue
----| newLayout.vue
--| pages/
----| newLayout/
------| _.vue
------| index.vue
----| _.vue
----| index.vue
----| newLayout.vue

Which step am I missing?

 

 

NB. I can write my own check in nuxt.config.js, and add the meta tag myself but this also gives unexpected results... the output is meta: {"layout":"newLayout"},, which doesn't seem to be correct as "layout" should be without quotes? It doesn't work either way... and if I read the docs and examples correctly, I should not have to be required to edit in the layouts information manually anyway.

Alright, so if anyone runs into this problem in the future, the issue in this case came from the use of nested routing in combination with the Layouts.

In the tree in my post you can see I have a /pages/newLayout/ folder, but also the /pages/newLayout.vue file, which adds the nesting to the routes for me (documentation). The super obvious solution is of course to specify the layout in that file, as the pipeline starts there, and voila it works.

<template>
  <div>
    <nuxt-child />
  </div>
</template>
<script>
export default {
  layout: 'newLayout',
};
</script>