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.