\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).",[3137],{"name":3138,"color":3139},"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.71608555,{"description":3148,"labels":3149,"number":3151,"owner":3141,"repository":3141,"state":3142,"title":3152,"updated_at":3153,"url":3154,"score":3155},"### Environment\n\nNuxt Version: 3.16.0\n\n### Reproduction\n\nBreaks [on Nuxt](https://stackblitz.com/edit/github-tg6jd22e?file=app%2Frouter.options.ts) and works [on vue-router](https://codesandbox.io/p/sandbox/omitting-parent-component-k7vg8j).\n\n### Describe the bug\n\nSince vue-router 4.1 is possible to [omit a parent component on nested routes](https://router.vuejs.org/guide/essentials/nested-routes.html#Omitting-parent-components-), but when is done on Nuxt with [Custom routing](https://nuxt.com/docs/guide/recipes/custom-routing) breaks the navigation and never finish loading.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3150],{"name":3138,"color":3139},31753,"Omitting parent component on nested routes breaks navigation","2025-04-09T11:48:18Z","https://github.com/nuxt/nuxt/issues/31753",0.7232006,{"description":3157,"labels":3158,"number":3168,"owner":3141,"repository":3169,"state":3142,"title":3170,"updated_at":3171,"url":3172,"score":3173},"### Environment\n\n\"nuxt\": \"^3.17.5\",\n\"@nuxt/ui\": \"^3.1.3\",\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nFollowing is my `components/AppHeader.vue`:\n\n```\n\u003Ctemplate>\n \u003Cheader class=\"bg-white sticky top-0 z-50\">\n \u003Cnav class=\"hidden lg:flex flex-1 justify-center\">\n \u003CUNavigationMenu\n v-model=\"activeSection\"\n :items=\"navItems\"\n class=\"space-x-2\"\n highlight\n highlight-color=\"primary\"\n >\n \u003Ctemplate #item=\"{ item, active }\">\n \u003CULink\n as-child\n :to=\"{ path: '', hash: `#${item.to}` }\"\n exact-hash\n class=\"px-4 py-2 rounded-md transition\"\n aria-label=\"Go to {{ item.label }}\"\n >\n \u003Cspan class=\"inline-flex items-center\">\n \u003CUIcon v-if=\"item.icon\" :name=\"item.icon\" class=\"size-5 mr-2\" />\n \u003Cspan>{{ item.label }}\u003C/span>\n \u003C/span>\n \u003C/ULink>\n \u003C/template>\n \u003C/UNavigationMenu>\n \u003C/nav>\n \u003C/header>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref, watch, onMounted } from \"vue\";\nimport { useRoute } from \"vue-router\";\nimport type { NavigationMenuItem } from \"@nuxt/ui\";\n\nconst route = useRoute();\nconst activeSection = ref(\"\");\n\n// Define your nav data (to = hash without leading '#')\nconst navItems = ref\u003CNavigationMenuItem[]>([\n { label: \"Home\", icon: \"i-lucide-home\", value: \"\", to: \"\" },\n {\n label: \"About Us\",\n icon: \"i-lucide-user-circle\",\n value: \"about\",\n to: \"about\",\n },\n {\n label: \"Products\",\n icon: \"i-lucide-package\",\n value: \"products\",\n to: \"products\",\n },\n {\n label: \"Technologies\",\n icon: \"i-lucide-cpu\",\n value: \"technologies\",\n to: \"technologies\",\n },\n {\n label: \"News\",\n icon: \"i-lucide-newspaper\",\n value: \"news\",\n to: \"news\",\n },\n]);\n\n// On load, seed activeSection from the current hash\nonMounted(() => {\n activeSection.value = route.hash.replace(/^#/, \"\");\n});\n\n// Update when the hash changes\nwatch(\n () => route.hash,\n (h) => {\n activeSection.value = h.replace(/^#/, \"\");\n }\n);\n\u003C/script>\n```\n\n### Description\n\n\nI’m using the Nuxt UI `\u003CUNavigationMenu>` component in my Nuxt 3 app to render a header nav that scrolls to sections via hash links within my `pages/index.vue` (`#about`, `#products`, `#news`, etc.). Clicking works fine, and the correct menu item highlights and scrolls to that section.\n\nHowever, if I reload the page while viewing, for example,`/#products` or any other section like `#news, #about`, etc., the page scrolls to the respective `products/news/about` section, but the navigation menu always highlights `“Home”` (the first item) instead of `Products/News/About`.\n\nHow can I get `\u003CUNavigationMenu>` to pick up the current `route.hash` on load so that the correct item is active?\n\n\n\nFollowing is the documentation I am refeering to:\n\u003CUNavigationMenu> API: [https://ui.nuxt.com/components/navigation-menu][1]\n\n\n [1]: https://ui.nuxt.com/components/navigation-menu\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3159,3162,3165],{"name":3160,"color":3161},"bug","d73a4a",{"name":3163,"color":3164},"v3","49DCB8",{"name":3166,"color":3167},"triage","ffffff",4416,"ui","Nuxt 3/Nuxt UI UNavigationMenu won’t highlight hash‐based section on page reload","2025-06-28T10:47:43Z","https://github.com/nuxt/ui/issues/4416",0.7347294,{"description":3175,"labels":3176,"number":3181,"owner":3141,"repository":3141,"state":3142,"title":3182,"updated_at":3183,"url":3184,"score":3185},"### Environment\n\nHere's the repro: https://github.com/Kasheftin/nuxt-non-element-root.\n\nI'm sure my components (all 3 of them) have a single root node.\n\nWhile going from one page to any other page, the following warning appears:\n```\n[Vue warn]: Component inside \u003CTransition> renders non-element root node that cannot be animated. \n at \u003CBaseTransition onAfterLeave= [ƒ] mode=\"out-in\" appear=false ... > \n at \u003CTransition onAfterLeave= [ƒ] name=\"rb-slide\" mode=\"out-in\" > \n at \u003CRouterView name=undefined route=undefined > \n at \u003CNuxtPage > \n at \u003CAdmin onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C null > > \n```\n\nI think the reason is the content of `/pages/admin.vue` template, which is just a \n```\n\u003Ctemplate>\n \u003Cnuxt-page />\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\ndefinePageMeta({\n pageTransition: {\n name: 'rb-slide',\n mode: 'out-in'\n }\n})\n\u003C/script>\n```\n\nIt's a single node, but for some reason, Nuxt counts it as non-single.\n\nThe reason why both the file `/pages/admin.vue` and the folder `/pages/admin/...` exist is that I want some settings like `middleware: ['auth']` to be applied to the entire subset of routes. Otherwise, I have to repeatedly define it in every `/pages/admin/index.vue`, `/pages/admin/profile.vue`, etc file. Please suggest a better way of doing this if there's any.\n\nThe template of the entry point, `/pages/admin.vue` should be just empty, it should not add any additional div wrapper or whatever.\n \n\n### Reproduction\n\nHere's the repro: https://github.com/Kasheftin/nuxt-non-element-root.\nJust click on any link on the index page.\n\n### Describe the bug\n\nWhile going from one page to any other page, the following warning appears:\n```\n[Vue warn]: Component inside \u003CTransition> renders non-element root node that cannot be animated. \n at \u003CBaseTransition onAfterLeave= [ƒ] mode=\"out-in\" appear=false ... > \n at \u003CTransition onAfterLeave= [ƒ] name=\"rb-slide\" mode=\"out-in\" > \n at \u003CRouterView name=undefined route=undefined > \n at \u003CNuxtPage > \n at \u003CAdmin onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C null > > \n```\n\nIt should not do it in case the page consists of just a single `\u003Ctemplate>\u003Cnuxt-page />\u003C/template>` template.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3177,3180],{"name":3178,"color":3179},"workaround available","11376d",{"name":3138,"color":3139},31810,"`\u003CNuxtPage>` does not render single root element when transition is enabled","2025-04-16T14:05:51Z","https://github.com/nuxt/nuxt/issues/31810",0.73720753,{"description":3187,"labels":3188,"number":3192,"owner":3141,"repository":3141,"state":3193,"title":3194,"updated_at":3195,"url":3196,"score":3197},"The problem that im facing has to do with nuxt-link and nuxt-view. As far as i've used vuejs i remember that if you put router-link and down below you put a router-view it will render everything with navigation bar if its there. However with nuxt i put nuxt-link (or router-link for testing) and below i put nuxt-view (or router-view for testing) it redirects me to another page but the navigation bar dissapears. At first i was told that i might need to use layout instead of components but its pretty much the same result. Here is the code:\r\n\r\n \r\n \u003Ctemplate>\r\n \u003Cdiv id=\"\">\r\n \u003Cnuxt-link :to='{name: \"terms-sections-test1\"}'>Go to 1 \u003C/nuxt-link>\r\n \u003Cnuxt-link to='/terms/sections/test2'>Go to 2 \u003C/nuxt-link>\r\n \u003Crouter-link to='terms/sections/test1'>ROUTER LINK\u003C/router-link>\r\n\r\n\r\n \u003Cnuxt-view> \u003C/nuxt-view>\r\n \u003Crouter-view >\u003C/router-view>\r\n\r\n\r\n\r\n \u003C/div>\r\n \u003C/template>\r\n \u003Cscript>\r\n export default {\r\n /* eslint-disable */\r\n layout: 'navigation'\r\n\r\n }\r\n \u003C/script>\r\n \u003Cstyle lang=\"css\" scoped>\r\n \u003C/style>\r\n\r\nIs there a work around so that i dont have to include layout everytime in its children components? or i need to include them everywhere? sorry for the noob question but i cant really see good documentation for nuxt-view.\r\n\r\nP.S: everytime when i press on my first nuxt-link it redirects me to the page but when i go back to initial page (the code above) it gives me this warning:\r\n\r\n [Vue warn]: Unknown custom element: \u003Cnuxt-view> - did you register the component correctly? For \r\n recursive components, make sure to provide the \"name\" option.\r\n\r\nPlease help :)\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/c977\">#c977\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3189],{"name":3190,"color":3191},"2.x","d4c5f9",1116,"closed","Nuxt-view with nuxt-link","2023-01-18T15:40:45Z","https://github.com/nuxt/nuxt/issues/1116",0.7190755,{"description":3199,"labels":3200,"number":3208,"owner":3141,"repository":3141,"state":3193,"title":3209,"updated_at":3210,"url":3211,"score":3212},"### Is your feature request related to a problem? Please describe.\r\nI have a detail page with a lot of information visualized in unique ways that only make sense to that page.\r\nBecause my `components` folder gets used for re-usable components, I have a subfolder in the same folder that route is located.\r\n\r\nMy `pages` folder looks a little something like this:\r\n```\r\nroutes\r\n- route-1\r\n - index.vue\r\n - -components\r\n - SomeComponentUniqueToThisRoute.vue\r\n - AnotherComponentUniqueToThisRoute.vue\r\n- route-2\r\n - index.vue\r\n - -components\r\n - SomeComponentUniqueToThisRoute.vue\r\n - AnotherComponentUniqueToThisRoute.vue\r\n .....\r\n```\r\n\r\nif I now go to `/route-2/-components/SomeComponentUniqueToThisRoute` it loads that component, obviously, because Nuxt thinks it's a page.\r\n\r\nIn the [documentation](https://nuxtjs.org/docs/2.x/directory-structure/pages#ignoring-pages) it says that I can already hide components by prefixing them with a `-`. But sadly this does not work on folders atm.\r\n\r\n### Describe the solution you'd like\r\nI want nuxt to **not** generate routes from `.vue` files in folders prefixed with a `-` by default, without the help of [.nuxtignore](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-ignore). Exactly like it already does for components.\r\n\r\nAll sub-folders and their .vue files should not be turned in to pages as well.\r\n\r\n### Describe alternatives you've considered\r\nHaving all components in my `-components` folder starting with a `-` would do the trick, but that is ugly and breaks vue's naming conventions.\r\n\r\nI could also write a couple of `.nuxtignore` rules that exclude the folders, but my application has many (around 25) -components folders that I would have to exclude. It is also another thing I have to explain to people who help me with this project, which isn't ideal.",[3201,3204,3207],{"name":3202,"color":3203},"enhancement","8DEF37",{"name":3205,"color":3206},"3.x","29bc7f",{"name":3190,"color":3191},11497,"Feature request: Ability to ignore whole directories inside `pages`","2025-01-06T11:25:47Z","https://github.com/nuxt/nuxt/issues/11497",0.72326696,{"description":3214,"labels":3215,"number":3220,"owner":3141,"repository":3169,"state":3193,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### 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_",[3216,3218,3219],{"name":3202,"color":3217},"a2eeef",{"name":3163,"color":3164},{"name":3166,"color":3167},4092,"Use Tabs for site navigation","2025-05-10T16:11:35Z","https://github.com/nuxt/ui/issues/4092",0.7244846,{"description":3226,"labels":3227,"number":3232,"owner":3141,"repository":3141,"state":3193,"title":3233,"updated_at":3234,"url":3235,"score":3236},"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>",[3228,3231],{"name":3229,"color":3230},"available soon","6de8b0",{"name":3190,"color":3191},1854,"Nuxt.js does not respect layouts in separate folders.","2023-01-18T15:42:45Z","https://github.com/nuxt/nuxt/issues/1854",0.7259025,{"labels":3238,"number":3241,"owner":3141,"repository":3141,"state":3193,"title":3242,"updated_at":3243,"url":3244,"score":3245},[3239,3240],{"name":3138,"color":3139},{"name":3190,"color":3191},10565,"Nuxt 3 does not respect layouts in separate folders.","2023-01-22T15:48:35Z","https://github.com/nuxt/nuxt/issues/10565",0.72734,{"description":3247,"labels":3248,"number":3249,"owner":3141,"repository":3250,"state":3193,"title":3251,"updated_at":3252,"url":3253,"score":3254},"- [ ] Search\n- [ ] Subnavbar Links\n- [ ] Examples\n- [ ] Community / Open Source Guides\n- [ ] v2 migration nuxtjs.org",[],1306,"nuxt.com","Documentation Update","2023-07-10T12:42:01Z","https://github.com/nuxt/nuxt.com/issues/1306",0.72991496,["Reactive",3256],{},["Set"],["ShallowReactive",3259],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f42fZ8oMY3Zz4L77YtweV7d43xq79VyY0P2apQhQ47Zk":-1},"/nuxt/ui/4955"]