Nuxt 3 does not respect layouts in separate folders

[DannyAndres]

Environment

Nuxt Version

• nuxt: v3.0.0 rc-4

Reproduction

Steps to reproduce

On a clean Nuxt 3 install.

Create a layout inside a folder like.

layouts/mobile/custom.vue

Use it in a page as follows.

<NuxtLayout name="mobile/custom"> some code ... </NuxtLayout>

Describe the bug

When I create a layout inside a folder like "layouts/mobile/custom.vue" and use it inside of "pages/index.vue" on a clean install of Nuxt 3 as follows.

<NuxtLayout name="mobile/custom"> some code ... </NuxtLayout>

It does not work, I don't know if this feature is not supported yet or if it is a bug, because when I went through the Nuxt 2 info I found this which came out thanks to an issue of this exact same problem in Nuxt 2

Adds support for folders in /layouts nuxt/nuxt.js#12765

Normal layout use like Nuxt 3 documentation works just fine, "layouts/custom.vue" inside of "pages/index.vue" like this.

<NuxtLayout name="custom"> some code ... </NuxtLayout>

What is Expected?

Is expected to work exactly as normal layouts would.

What is actually happening?

Got an error in console as if the layout does not exists.

Invalid layout "mobile/custom" selected.

[danielroe]

Check out nuxt/framework#5842 for prior work. Closed only due to repository migration + lack of time to add my suggestion below. Here are my thoughts in case anyone else wants to pick this:

---

I think we do need to support layouts in nested folders, and this was a nice implementation 👌

However, on reflection I think the most consistent/intuitive approach is to follow the pattern of the components directory - producing & deduplicating segments. We can extract the utility and share it between the two parts of Nuxt.

For example:

File	Layout name
~/layouts/desktop/default.vue	'desktop-default'
~/layouts/desktop-base/base.vue	'desktop-base'
~/layouts/desktop/index.vue	'desktop'

[seanfilimon]

Yep agreed this needs to be implemented

[Suv4o]

@danielroe I created a pull request for a fix on this issue. Please check it out in the following link. —> #20190

[selimdoyranli]

@danielroe Any update? I need this enhancement to create the following structure;

layouts
 ┣ Corporate
 ┃ ┣ Corporate.layout.scss
 ┃ ┗ Corporate.layout.vue
 ┗ Default
 ┃ ┣ Default.layout.scss
 ┃ ┗ Default.layout.vue

it works on nuxt2:

<script>
...
layout: 'Corporate/Corporate.layout'
..
</script>

But it didn't work on nuxt3
<NuxtLayout name="Corporate/Corporate.layout">

In addition, it would be very useful if you could add this defining support for defining default and error layout