\n \u003CNuxtPage /> \u003C!-- renders children like index.vue, favorite.vue -->\n \u003C/div>\n\u003C/template>\n```\n\nThis improves clarity by:\n\n* Explicitly distinguishing **nested layout files** from **page files**.\n* Avoiding the overloaded role of `parent.vue`.\n* Making folder structures self-explanatory.\n\n### Benefits\n\n* More intuitive project structure for large apps.\n* Easier onboarding for new developers (clear separation of layouts vs. pages).\n* Cleaner, scalable convention that aligns with the mental model of “global layouts” vs. “section layouts.”\n\n### Additional information\n\n- [x] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3139],{"name":3140,"color":3141},"pending triage","E99695",33073,"nuxt","open","[Enhancement] Better Syntax/Convention for Nested Layouts in Nuxt","2025-08-27T05:51:23Z","https://github.com/nuxt/nuxt/issues/33073",0.6755758,{"description":3150,"labels":3151,"number":3158,"owner":3143,"repository":3143,"state":3159,"title":3160,"updated_at":3161,"url":3162,"score":3163},"I want to split the layouts to `layouts/desktop/*` and `layouts/mobile/*`.\r\nI 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:\r\n```\r\n\u003Ctemplate>\r\n \u003Csection class=\"container\">\r\n \u003Ch1> hello there \u003C/h1>\r\n \u003C/section>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nexport default {\r\n layout: ({ isMobile }) => isMobile ? 'mobile/mainpage' : 'desktop/mainpage'\r\n};\r\n\u003C/script>\r\n```\r\nIn 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 \r\n`pages/index.vue` like so\r\n```\r\n\u003Ctemplate>\r\n \u003Csection class=\"container\">\r\n \u003Ch1> hello there \u003C/h1>\r\n \u003C/section>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nexport default {\r\n layout: ({ isMobile }) => isMobile ? 'mainpage' : 'mainpage'\r\n};\r\n\u003C/script>\r\n```\r\nit works correctly. \r\nIt 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.\r\n\r\nI think that the problem is here:\r\nhttps://github.com/nuxt/nuxt.js/blob/dev/lib/builder/builder.js#L228\r\n\r\nFunny fact:\r\nIn `/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`.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1666\">#c1666\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3152,3155],{"name":3153,"color":3154},"available soon","6de8b0",{"name":3156,"color":3157},"2.x","d4c5f9",1854,"closed","Nuxt.js does not respect layouts in separate folders.","2023-01-18T15:42:45Z","https://github.com/nuxt/nuxt/issues/1854",0.66731447,{"description":3165,"labels":3166,"number":3167,"owner":3143,"repository":3143,"state":3159,"title":3168,"updated_at":3169,"url":3170,"score":3171},"### Environment\r\n\r\nNuxt CLI v3.0.0-27234271.da7ff44 \r\nRootDir: /home/projects/github-jatu7c \r\n\r\n### Describe the bug\r\n\r\nWhen using a Layout with a Page that has multiple root elements (Fragments), it breaks the layout\r\n\r\n### Reproduction\r\n\r\n\r\nCodeSandBox Project is here: [https://codesandbox.io/s/nux3-multi-root-page-jypp8](https://codesandbox.io/s/nux3-multi-root-page-jypp8)\r\n\r\n- There are two pages, \"Homepage\" and \"About\" with a h1 header and link to the other one, wrapped in a main tag.\r\n- Switching between them works fine and the layout is maintained.\r\n- If you remove the wrapper tag (main) in \"About\", so that it's a multi-root component and move between the pages, the layout breaks.\r\n\r\n\r\nBroken CodeSandBox is here [https://codesandbox.io/s/nux3-multi-root-page-broken-10t23?file=/pages/about.vue](https://codesandbox.io/s/nux3-multi-root-page-broken-10t23?file=/pages/about.vue)\r\n\r\n\r\n### Additional context\r\n\r\nIn vue 3 slots work with multi root components: see in this repo: https://codesandbox.io/s/multi-slot-component-scqbd\r\n\r\n### Logs\r\n\r\n_No response_",[],12077,"Layout breaks when a Page is a Multi Root Component / Fragments","2023-01-19T15:54:17Z","https://github.com/nuxt/nuxt/issues/12077",0.68133205,{"description":3165,"labels":3173,"number":3174,"owner":3143,"repository":3143,"state":3159,"title":3168,"updated_at":3175,"url":3176,"score":3171},[],12150,"2023-01-19T15:59:15Z","https://github.com/nuxt/nuxt/issues/12150",{"labels":3178,"number":3179,"owner":3143,"repository":3143,"state":3159,"title":3168,"updated_at":3180,"url":3181,"score":3171},[],12191,"2023-01-19T16:00:22Z","https://github.com/nuxt/nuxt/issues/12191",{"labels":3183,"number":3184,"owner":3143,"repository":3143,"state":3159,"title":3168,"updated_at":3185,"url":3186,"score":3171},[],12624,"2023-01-19T16:07:58Z","https://github.com/nuxt/nuxt/issues/12624",{"labels":3188,"number":3189,"owner":3143,"repository":3143,"state":3159,"title":3168,"updated_at":3190,"url":3191,"score":3171},[],12644,"2023-01-19T16:09:47Z","https://github.com/nuxt/nuxt/issues/12644",{"labels":3193,"number":3196,"owner":3143,"repository":3143,"state":3159,"title":3197,"updated_at":3198,"url":3199,"score":3200},[3194,3195],{"name":3140,"color":3141},{"name":3156,"color":3157},9613,"Bug with nuxt-child in nested pages","2023-01-22T15:44:58Z","https://github.com/nuxt/nuxt/issues/9613",0.6850499,{"description":3165,"labels":3202,"number":3209,"owner":3143,"repository":3143,"state":3159,"title":3168,"updated_at":3210,"url":3211,"score":3212},[3203,3206],{"name":3204,"color":3205},"3.x","29bc7f",{"name":3207,"color":3208},"bug","d73a4a",11981,"2023-01-19T16:13:29Z","https://github.com/nuxt/nuxt/issues/11981",0.6857538,{"description":3214,"labels":3215,"number":3226,"owner":3143,"repository":3143,"state":3159,"title":3227,"updated_at":3228,"url":3229,"score":3230},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, pages, css, postcss\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-q76q7r?file=pages%2Findex.vue\n\n### Describe the bug\n\nI'm having an issue with transitions in a nested layout/page situation. There is a homepage that contains a nested layout with `\u003CNuxtPage>` inside. Those nested pages have transitions applied. If you hit the homepage directly, and click links for the nested page URLs, the transitions work on the nested page as expected. However, if you go to a page's direct URL and navigate to another page, it's the homepage (the parent) that gets the transition applied. I just can't figure out why. \r\n\r\nI've created a basic demo that mimics our setup. Even though it doesn't replicate our exact problem, it still has the issue of the transition applied to the parent homepage instead of the nested pages. If anyone could take a look and weigh in on what I could be doing wrong, you'd be a life-saver. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3216,3219,3220,3223],{"name":3217,"color":3218},"workaround available","11376d",{"name":3140,"color":3141},{"name":3221,"color":3222},"needs reproduction","FBCA04",{"name":3224,"color":3225},"closed-by-bot","ededed",25487,"Transitions on Nested Pages animating wrong container","2025-06-07T02:11:27Z","https://github.com/nuxt/nuxt/issues/25487",0.6860761,["Reactive",3232],{},["Set"],["ShallowReactive",3235],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fLrboPEKFOW6Tn2NBz104o_OV2C2Bno768zHlpSWHnt0":-1},"/nuxt/nuxt/15461"]