Static GitHub Issues

[1854] Nuxt.js does not respect layouts in separate folders.

prev: Store is empty after redirect.
next: Page is rendered even if `fetch` called `redirect`

I want to split the layouts to layouts/desktop/* and layouts/mobile/*. I did a change in an /pages/index.vue which points to layouts/desktop/mainpage.vue if user agent is desktop and layouts/mobile/mainpage.vue if user ager is desktop. The problem is that it does not work. simply my pages/index.vue looks like this:

<template>
  <section class="container">
    <h1> hello there </h1>
  </section>
</template>

<script>
export default {
  layout: ({ isMobile }) => isMobile ? 'mobile/mainpage' : 'desktop/mainpage'
};
</script>

In my layouts I got folders /desktop /mobile in which I want to store my layouts according to type of content. The problem is that the when I put my mainpage.vue layout in layouts/desktop nothing renders, but when I put mainpage.vue in /layouts and then I change pages/index.vue like so

<template>
  <section class="container">
    <h1> hello there </h1>
  </section>
</template>

<script>
export default {
  layout: ({ isMobile }) => isMobile ? 'mainpage' : 'mainpage'
};
</script>

it works correctly. It seems that layouts should not be nested in folders. Is there a quick fix for it? I dont want to name my layouts like mainpageMobile.vue I would rather keep those files in separate folders.

I think that the problem is here: https://github.com/nuxt/nuxt.js/blob/dev/lib/builder/builder.js#L228

Funny fact: In /components I can create nested folders for mobile and desktop and they work just fine for layouts like mainpageMobile.vue and mainpageDesktop.vue, but the behaviour of nuxt.js would be much more consistent if we could place nested folders in /layouts in the same way we can place nested folders in /components.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1666">#c1666</a>)</em></sub></div>