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
.