feat(nuxt): nested layout files

[DannyAndres]

This PR resolves the issue #5793 A developer will be able to create multiple folders in /layouts and then access them in pages.

This feature was heavily inspired in the PR Adds support for folders in /layouts nuxt/nuxt.js#12765
for Nuxt 2 and works in the exact same way.

For instance, if in /layouts there are 2 folders like:

• layouts
  • folder1
  • folder2

the developer is able to create files which are named the same but they are in different folders.
Like folder1/default.vue and folder2/default.vue and then access those layouts in /pages using following rule.

folder_in_layouts + layout-file-name

Pull Request re opened due to a linter over editing the code in feat(nuxt): nested layout files nuxt/framework#5796

[netlify]

✅ Deploy Preview for nuxt3-docs canceled.

Name	Link
🔨 Latest commit	42ff0ad
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/62cd057bb11bab000922bbf7

[danielroe]

Thank you ❤️

[jjjrmy]

What can we do to get this approved pull

[Aksoom-Hussain]

this PR needs a slight change as it has already been implemented as to switch layout
https://v3.nuxtjs.org/guide/directory-structure/layouts#changing-the-layout-dynamically

I would recommend looking at the link
https://inertiajs.com/pages#persistent-layouts

Here for example, maybe you have an audio player on a podcast website that you want to continue playing as users navigate the site. Or, you may want to maintain the scroll position in your navigation between page visits. In these situations, using persistent layouts is a better choice.

layout: (h, page) => h(Layout, () => child),

[jjjrmy]

@Aksoom-Hussain I don't think that is the problem this PR is trying to solve.
My understanding is that this PR allows you to call a layout in a nested FOLDER.

Currently something like this is not possible, every layout must be in the root of the layouts directory.

definePageMeta({
  layout: 'theme1/layout1',
});

[danielroe]

Thank you for this PR - 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'

If you have time to implement, that would be great! If not, please do let me know 🙏

[DannyAndres]

Thank you for this PR - 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'
If you have time to implement, that would be great! If not, please do let me know 🙏

oh, just saw this. Thankfully 5 days later and not months or a year.
sadly I don't think I have time for that in the next couple of months. too busy at work :( but ... it would have been nice to do it.
And also would love to see this feature soon to keep cleaner layouts can wait to see another PR that does this

[danielroe]

I am sorry for the delay in having this PR reviewed! Okay, I'll close this PR here and comment on the issue you created so no one else is blocked in adding this feature.