\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).",[3164],{"name":3165,"color":3166},"pending triage","E99695",33073,"[Enhancement] Better Syntax/Convention for Nested Layouts in Nuxt","2025-08-27T05:51:23Z","https://github.com/nuxt/nuxt/issues/33073",0.730362,{"description":3173,"labels":3174,"number":3184,"owner":3155,"repository":3185,"state":3156,"title":3186,"updated_at":3187,"url":3188,"score":3189},"### Environment\n\n- Operating System: 'Linux (Ubuntu)'\n- Node Version: `v22.12.0`\n- Nuxt Version: `v3.0.0-alpha.12`\n- Package Manager: `pnpm@9.15.4`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\nSteps to Reproduce\n\n Create a button in a Nuxt.js project.\n\n Add text to the button.\n\n Try to center the text using text-align: center or margin: auto.\n\n Observe that the text does not center properly.\n\n Switch to using display: flex; justify-content: center; align-items: center; and observe that the text centers correctly.\n\n### Description\n\nI'm experiencing an issue where the text inside a button only centers correctly when using flexbox. When using traditional methods like text-align: center or margin: auto, the text does not align properly.\n\n### Additional context\n\n\n\n### Logs\n\n```shell-script\n\n```",[3175,3178,3181],{"name":3176,"color":3177},"bug","d73a4a",{"name":3179,"color":3180},"v3","49DCB8",{"name":3182,"color":3183},"triage","ffffff",3251,"ui","Button text alignment issue: Text only centers properly with flexbox","2025-02-10T10:12:50Z","https://github.com/nuxt/ui/issues/3251",0.7304873,{"labels":3191,"number":3196,"owner":3155,"repository":3155,"state":3197,"title":3198,"updated_at":3199,"url":3200,"score":3201},[3192,3193],{"name":3146,"color":3147},{"name":3194,"color":3195},"2.x","d4c5f9",6104,"closed","Layout should be able to extend another layout (\"layout nesting\"?)","2023-01-22T15:50:56Z","https://github.com/nuxt/nuxt/issues/6104",0.6934662,{"labels":3203,"number":3206,"owner":3155,"repository":3155,"state":3197,"title":3207,"updated_at":3208,"url":3209,"score":3210},[3204,3205],{"name":3146,"color":3147},{"name":3194,"color":3195},10299,"Layout options","2025-03-12T16:25:33Z","https://github.com/nuxt/nuxt/issues/10299",0.6951566,{"description":3212,"labels":3213,"number":3216,"owner":3155,"repository":3155,"state":3197,"title":3217,"updated_at":3218,"url":3219,"score":3220},"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>",[3214,3215],{"name":3146,"color":3147},{"name":3194,"color":3195},3099,"[Feature request]: Create nested Layouts","2025-03-18T08:49:20Z","https://github.com/nuxt/nuxt/issues/3099",0.70215094,{"description":3222,"labels":3223,"number":3228,"owner":3155,"repository":3185,"state":3197,"title":3229,"updated_at":3230,"url":3231,"score":3232},"### Description\n\nI came across the fact that I can't use variations of combinations in the \u003CUKbd /> component, e.g. `\u003CUkbd>meta K\u003C/UKbd>`. After researching the code, I realized that composable, in principle, does not support multi-input, only a known value is expected. It would be nice if there was support for entering a combination of words.\n\nI can create an MR if it really seems useful to you.\n\n### Additional context\n\n_No response_",[3224,3226,3227],{"name":3146,"color":3225},"a2eeef",{"name":3179,"color":3180},{"name":3182,"color":3183},3697,"Support for combinations in the useKbd() composable","2025-03-26T14:57:19Z","https://github.com/nuxt/ui/issues/3697",0.7115342,{"description":3234,"labels":3235,"number":3238,"owner":3155,"repository":3185,"state":3197,"title":3239,"updated_at":3240,"url":3241,"score":3242},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.13.1`\n- Nuxt Version: `3.15.4`\n- CLI Version: `3.22.2`\n- Nitro Version: `2.10.4`\n- Package Manager: `bun@1.2.2`\n- Builder: `-`\n- User Config: `compatibilityDate`, `ssr`, `extends`, `modules`, `css`, `components`, `ui`, `app`, `dayjs`, `icon`\n- Runtime Modules: `@nuxt/ui-pro@3.0.0-beta.2`, `dayjs-nuxt@2.1.11`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-beta.2\n\n### Reproduction\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n violet: 'violet',\n },\n },\n});\n```\n\n```ts\nexport default defineNuxtConfig({\n ui: {\n theme: {\n colors: [\n 'primary', 'secondary', 'tertiary',\n 'info', 'success', 'warning',\n 'error', 'violet'\n ]\n }\n },\n});\n\n```\n\n### Description\n\nSetting a custom color with the same name as the color causes some kind of cylical referernce in the css vars between NuxtUIv3 and TWv4.\n\n\n\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3236,3237],{"name":3176,"color":3177},{"name":3179,"color":3180},3426,"Setting custom color alias the same name as the color does not work","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3426",0.7198546,{"description":3244,"labels":3245,"number":3248,"owner":3155,"repository":3249,"state":3197,"title":3250,"updated_at":3251,"url":3252,"score":3253},"### Describe the feature\n\nThis might sound funny, but I am currently opening `nuxt.com` like 50 times a day, mostly to get a docs link to something I want to send to somebody/post somewhere for reference. And I always have to click on \"Docs\" before accessing the input field for the search. \r\n\r\nAn easy fix would be to also add the search field to the `nuxt.com/` home page.\r\n\r\nAs the website repo is not yet open source, I cannot propose a PR.\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).",[3246],{"name":3146,"color":3247},"1ad6ff",1225,"nuxt.com","[Docs] Add the docs search field to the nuxt.com homepage","2023-10-10T14:45:11Z","https://github.com/nuxt/nuxt.com/issues/1225",0.72242934,{"description":3255,"labels":3256,"number":3259,"owner":3155,"repository":3155,"state":3197,"title":3260,"updated_at":3261,"url":3262,"score":3263},"### What problem does this feature solve?\n\nReadability of output html is sacrificed, since even if you put simplest implementation in default layout file you will have extra div's created\n```\n\u003Ctemplate>\n \u003Cmain>\u003Cnuxt/>\u003C/main>\n\u003C/template>\n```\nwill result in\n```\n\u003Cbody data-n-head=\"\">\n \u003Cdiv id=\"__nuxt\">\n \u003Cdiv class=\"nuxt-progress\">\u003C/div>\n \u003Cdiv id=\"__layout\">\n \u003Cmain>\n \u003Cdiv data-v-1b011d9c=\"\">\n Hello!\n \u003C/div>\n \u003C/main>\n \u003C/div>\n \u003C/div>\n\u003C/div>\n```\nI want to be able to remove extra div's like id=\"__nuxt\" class=\"nuxt-progress\" id=\"__layout\" so that the output html is more readable to search engines and was easier to read.\n\n\n### What does the proposed changes look like?\n\nSince we already have possibility to override document, we should have more control on that like\n```\n\u003C!DOCTYPE html>\n\u003Chtml {{ HTML_ATTRS }}>\n \u003Chead>\n {{ HEAD }}\n \u003C/head>\n \u003Cbody {{ BODY_ATTRS }}>\n {{ APP }}\n \u003C/body>\n\u003C/html>\n```\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7645\">#c7645\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3257,3258],{"name":3146,"color":3147},{"name":3194,"color":3195},3811,"Allow possibility to change/remove div id=__layout and div id=__nuxt","2023-01-22T15:50:41Z","https://github.com/nuxt/nuxt/issues/3811",0.7238941,["Reactive",3265],{},["Set"],["ShallowReactive",3268],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fzbwgAeMXesdB9K77NqVZXva2HSUUhI3rgmlmVyBJvAE":-1},"/nuxt/ui/2888"]