\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).",[3145],{"name":3146,"color":3147},"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.6805454,{"description":3156,"labels":3157,"number":3159,"owner":3149,"repository":3149,"state":3150,"title":3160,"updated_at":3161,"url":3162,"score":3163},"### Describe the feature\n\nAs a developer working with Nuxt auto-generated router from `pages/` directory, I am tired of creating \"intermediary\" pages for the nested routes. What I mean is, if I have pages:\n- `pages/posts/index.vue`\n- `pages/posts/[id].vue`\n\nthen these page are not \"grouped\" into a single router tree node, and `\u003Cnuxt-link to=\"/posts\">` is not marked as \"active\" when user is viewing the page `/posts/123` (which is a subtle bug which may be long staying unnoticed).\n\nTo overcome this, one needs not to forget to create `pages/posts.vue` with a single `\u003Cnuxt-page/>` in it:\n\n```vue\n\u003C!-- for vue-router to group child pages -->\n\n\u003Ctemplate lang=\"pug\">\nnuxt-page\n\u003C/template>\n```\n\nIn a deeply nested pages structure, a solid portion of my files are these groupers.\n\nWhat I propose is, add a `nuxt.config.ts` setting that will inject these \"intermediary\" grouping components automatically, something like:\n\n```ts\nexport default defineNuxtConfig({\n pages: {\n groupNestedPages: true // should use better name\n }\n})\n```\n\nGranted, this can be implemented as an external module, but then the router generator itself can be implemented as a module, yet it's built-in.\n\n### Additional information\n\n- [x] Would you be willing to help implement this feature?\n- [x] 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).",[3158],{"name":3146,"color":3147},33181,"Group nested pages","2025-09-09T03:56:31Z","https://github.com/nuxt/nuxt/issues/33181",0.7284886,{"description":3165,"labels":3166,"number":3176,"owner":3149,"repository":3177,"state":3150,"title":3178,"updated_at":3179,"url":3180,"score":3181},"### Description\n\n**Description**\nFirst of all, thanks to the Nuxt UI team 🙏. The Table component is already very powerful and easy to use.\nHowever, I noticed that the documentation currently does not include an example for **Tree Data (hierarchical table rows)**.\n\nTree data tables are very common in real-world scenarios such as organization structures, directory hierarchies, or permission management. For reference, Ant Design Table provides a [Tree Data example](https://ant.design/components/table-cn#table-demo-tree-data) which is very helpful for developers.\n\n**Use Case**\n\n* Add a Tree Data example in the docs.\n* Demonstrate how to define hierarchical rows via a `children` field (or similar property).\n* Ideally, include an example showing row selection with/without cascading (similar to `CheckStrictly` in Ant Design).\n\n**Expected Behavior**\nThe documentation should include a Tree Data demo, making it easier for developers to get started with hierarchical tables. For example:\n\n\u003Cimg width=\"1457\" height=\"491\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/8b90dd75-3d22-4bbd-8b31-67702930af1e\" />\n\n\n### Additional context\n\n_No response_",[3167,3170,3173],{"name":3168,"color":3169},"enhancement","a2eeef",{"name":3171,"color":3172},"v3","49DCB8",{"name":3174,"color":3175},"triage","ffffff",4786,"ui","[Documentation] Add Tree Data example in Table documentation","2025-08-19T03:41:07Z","https://github.com/nuxt/ui/issues/4786",0.73843217,{"description":3183,"labels":3184,"number":3188,"owner":3149,"repository":3177,"state":3189,"title":3190,"updated_at":3191,"url":3192,"score":3193},"### Description\n\nHello\n\nI‘m using nuxt ui 3 and I really love it. At the moment I use de UNavigationMenu with the links to navigate between sub-pages. I wanted to change to the UTabs, because I really lile the look of them. But unfortunately I realised, that this is not that easy. The UTabs are not made like the UNavigationMenu links, where you can easily render the sub-pages in the NuxtPage with to: links. Could you make this possible? ☺️\n\nThank you! \n\nCuster\n\n### Additional context\n\n_No response_",[3185,3186,3187],{"name":3168,"color":3169},{"name":3171,"color":3172},{"name":3174,"color":3175},4092,"closed","Use Tabs for site navigation","2025-05-10T16:11:35Z","https://github.com/nuxt/ui/issues/4092",0.6998433,{"description":3195,"labels":3196,"number":3201,"owner":3149,"repository":3149,"state":3189,"title":3202,"updated_at":3203,"url":3204,"score":3205},"### Describe the feature\n\nIn `nuxt 3.8.2`, if I want to create two nested route like `/parent/a` and `/parent/b`, I need to organize these three `.vue` file like this:\r\n```\r\n\\pages\r\n \\parent\r\n a.vue\r\n b.vue\r\n parent.vue\r\n```\r\nthen add `\u003CNuxtPage />` into `parent.vue` as `\u003CRouterView>`, and add redirect rule in `parent.vue`:\r\n```ts\r\ndefinePageMeta({\r\n redirect: '/parent/a',\r\n})\r\n```\r\nIt work well.\r\n\r\n---\r\n\r\nBut if I place these three files as the following structure:\r\n```\r\n\\pages\r\n \\parent\r\n index.vue\r\n a.vue\r\n b.vue\r\n```\r\nthis `index.vue` couldn't be execute or render.\r\nBut I think it's a better way to origainze nasted file, especially when the neste rule is complex. \r\n\n\n### Additional information\n\n- [ ] 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).",[3197,3200],{"name":3198,"color":3199},"3.x","29bc7f",{"name":3146,"color":3147},24720,"More support for nested route","2024-01-02T11:33:45Z","https://github.com/nuxt/nuxt/issues/24720",0.7204493,{"labels":3207,"number":3213,"owner":3149,"repository":3149,"state":3189,"title":3214,"updated_at":3215,"url":3216,"score":3217},[3208,3209,3210],{"name":3198,"color":3199},{"name":3146,"color":3147},{"name":3211,"color":3212},"needs reproduction","FBCA04",14155,"nested NuxtPage not rendering","2023-01-19T17:26:33Z","https://github.com/nuxt/nuxt/issues/14155",0.72691405,{"description":3219,"labels":3220,"number":3223,"owner":3149,"repository":3149,"state":3189,"title":3224,"updated_at":3225,"url":3226,"score":3227},"### Describe the feature\n\nCurrently for nest routes if we have a page (`/parent/index.vue`) with `\u003CNuxtPage />` and a child page (`/parent/child.vue`) on the same level as the parent, `\u003CNuxtPage />` doesn't render the child pages's content.\r\n\r\n\r\n\r\nFrom the docs i have to make it `parent.vue` outside the `parent` folder.\r\n\r\n\r\nIn our project we have many pages and we have a folder structure where we separated the style from the template, example:\r\n\r\n\r\nso jumping between the `parent.vue` file all the way to the child folder then the `child.vue` file is a bit of a bother \r\nit would be great if the above scenario with the `index.vue` as a parent would work 🙏\r\n\r\n\r\n\r\n\r\n\n\n### Additional information\n\n- [ ] 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).",[3221,3222],{"name":3198,"color":3199},{"name":3146,"color":3147},22426,"\u003CNuxtPage /> with index.vue issue","2023-08-01T11:49:39Z","https://github.com/nuxt/nuxt/issues/22426",0.7274932,{"description":3229,"labels":3230,"number":3236,"owner":3149,"repository":3149,"state":3189,"title":3237,"updated_at":3238,"url":3239,"score":3240},"It would be nice enough to be able to create layouts that would imitate other layouts. Let's say this:\r\n```bash\r\n/---layout\r\n | default.vue\r\n |\r\n /---header\r\n index.vue\r\n full-width.vue\r\n sidebar.vue\r\n```\r\nIn the `/layout/header/index.vue` we create the base with header:\r\n```html\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"header-template-root\">\r\n \u003Capp-header>\u003C/app-header>\r\n \u003Cmain>\r\n \u003Cnuxt/>\r\n \u003C/main>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\nNext, we complement this layout in an nested `/layout/header/sidebar.vue`:\r\n```html\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"sidebar-template-root\">\r\n \u003Caside>\r\n \u003C!-- -->\r\n \u003C/aside>\r\n \u003Carticle>\r\n \u003Cnuxt/>\r\n \u003C/article>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\nFinally, we use this layout on the page\r\n```html\r\n\u003Ctemplate>\r\n \u003Cp>Page content ...\u003C/p>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n export default {\r\n layout: 'header/sidebar'\r\n }\r\n\u003C/script>\r\n```\r\nAs a result, we will get a page with the following code:\r\n```html\r\n\u003Cdiv class=\"header-template-root\">\r\n \u003Capp-header>\u003C/app-header>\r\n \u003Cmain>\r\n \u003Cdiv class=\"sidebar-template-root\">\r\n \u003Caside>\r\n \u003C!-- -->\r\n \u003C/aside>\r\n \u003Carticle>\r\n \u003Cp>Page content ...\u003C/p>\r\n \u003C/article>\r\n \u003C/div>\r\n \u003C/main>\r\n\u003C/div>\r\n```\r\n\r\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\r\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2683\">#c2683\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3231,3233],{"name":3168,"color":3232},"8DEF37",{"name":3234,"color":3235},"2.x","d4c5f9",3099,"[Feature request]: Create nested Layouts","2025-03-18T08:49:20Z","https://github.com/nuxt/nuxt/issues/3099",0.72876364,{"description":3242,"labels":3243,"number":3254,"owner":3149,"repository":3149,"state":3189,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### Environment\n\n```\n------------------------------\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.13.2\n- CLI Version: 3.13.2\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: compatibilityDate, devtools, ssr, modules, auth\n- Runtime Modules: @pinia/nuxt@0.5.4, @trandaison/nuxt-3-auth@0.1.4\n- Build Modules: -\n------------------------------\n```\n\n### Reproduction\n\nWith Nuxt 3.13 (not working): https://stackblitz.com/edit/nuxt-starter-gmwxix?file=nuxt.config.ts\n\nWith Nuxt 3.11 (working): https://stackblitz.com/edit/nuxt-starter-meyimq?file=nuxt.config.ts\n\n### Describe the bug\n\nI'm using a page with a `login` layout.\nAfter upgrading the nuxt version from 3.11.2 to 3.13.2, the layout is no more used and the `default` one is used instead.\n\n```vue\n\u003Cscript setup>\ndefinePageMeta({\n auth: 'guest',\n layout: 'login',\n});\n\u003C/script>\n```\n\n### Additional context\n\nThis problem is reproducible when using the [`trandaison/nuxt-3-auth`](https://github.com/trandaison/nuxt-3-auth) plugin. When using Nuxt without it, layouts work fine.\n\n### Logs\n\n_No response_",[3244,3245,3248,3251],{"name":3198,"color":3199},{"name":3246,"color":3247},"workaround available","11376d",{"name":3249,"color":3250},"bug","d73a4a",{"name":3252,"color":3253},"possible regression","B90A42",29361,"Page layout stopped working after upgrading nuxt from 3.11 to 3.13","2024-11-19T12:00:58Z","https://github.com/nuxt/nuxt/issues/29361",0.73120356,{"description":3260,"labels":3261,"number":3263,"owner":3149,"repository":3149,"state":3189,"title":3264,"updated_at":3265,"url":3266,"score":3267},"Hello,\r\n\r\nfirst, let me thank you for such a great _tool_. Since I am new with Vue.js and NuxtJS, in particular, I wanted to ask you 2 questions.\r\n\r\n1) How can one create for example a \"projects\" in pages with project detail pages (e.g. for a porfolio)?\r\n2) How can one add Schema.org ld+json structure in the header?\r\n\r\nAny example would be much appreciated. And yes, I have studied the documentation.\r\n\r\nThank you!\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/c2029\">#c2029\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3262],{"name":3234,"color":3235},2323,"Example for subpage directories + LD JSON","2023-01-18T15:43:53Z","https://github.com/nuxt/nuxt/issues/2323",0.7314998,["Reactive",3269],{},["Set"],["ShallowReactive",3272],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQXLAFPhOnQR_rY3PoDt7Mk9_PyvcxpHgnc8PsBv3yis":-1},"/nuxt/ui/2872"]