\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>",[3077,3078],{"name":3020,"color":3021},{"name":3057,"color":3058},3099,"[Feature request]: Create nested Layouts","2025-03-18T08:49:20Z","https://github.com/nuxt/nuxt/issues/3099",0.70215094,{"description":3085,"labels":3086,"number":3091,"owner":3029,"repository":3048,"state":3060,"title":3092,"updated_at":3093,"url":3094,"score":3095},"### 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_",[3087,3089,3090],{"name":3020,"color":3088},"a2eeef",{"name":3042,"color":3043},{"name":3045,"color":3046},3697,"Support for combinations in the useKbd() composable","2025-03-26T14:57:19Z","https://github.com/nuxt/ui/issues/3697",0.7115342,{"description":3097,"labels":3098,"number":3101,"owner":3029,"repository":3048,"state":3060,"title":3102,"updated_at":3103,"url":3104,"score":3105},"### 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```",[3099,3100],{"name":3039,"color":3040},{"name":3042,"color":3043},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":3107,"labels":3108,"number":3111,"owner":3029,"repository":3112,"state":3060,"title":3113,"updated_at":3114,"url":3115,"score":3116},"### 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).",[3109],{"name":3020,"color":3110},"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":3118,"labels":3119,"number":3122,"owner":3029,"repository":3029,"state":3060,"title":3123,"updated_at":3124,"url":3125,"score":3126},"### 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>",[3120,3121],{"name":3020,"color":3021},{"name":3057,"color":3058},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,{"description":3128,"labels":3129,"number":3134,"owner":3029,"repository":3029,"state":3060,"title":3135,"updated_at":3136,"url":3137,"score":3138},"Hello ! on my site (https://yineo.fr/), my right sidebar is a component called from **layouts/default.vue**\r\n\r\nBecause i don't want to call it in every page component. \r\n\r\nI know asyncData() is only for pages and not layouts but maybe they are some workarounds ?\r\n\r\nSo my sidebar with last articles is not server side rendered and google bot can not see it ( see picture below, the left one is what google bot see and probably index )\r\n\r\nHow can i have server side rendering for my \"Sidebar\" Component called from **layouts/default.vue** ( code below the picture ) ?\r\nthanks !\r\n\r\n\u003Cimg width=\"1101\" alt=\"capture d ecran 2017-08-12 a 04 24 47\" src=\"https://user-images.githubusercontent.com/335495/29237021-c3c1c262-7f15-11e7-9267-b2170831a9cb.png\">\r\n\r\n```html\r\n\u003C!-- main layout -->\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CAppNavigation />\r\n \u003CAppHeader/>\r\n \r\n \u003Cdiv class=\"container\">\r\n \u003Cdiv class=\"columns\">\r\n \r\n \u003Cdiv class=\"column is-two-thirds\">\r\n \u003Cnuxt/>\r\n \u003C/div>\r\n \r\n \u003Cdiv class=\"column\">\r\n \u003Csection class=\"section\">\r\n \u003CTwitterFollowMe/>\r\n \u003Chr/>\r\n \u003Ch2 class=\"title is-2\">Derniers billets\u003C/h2>\r\n \u003CPostsSidebar :posts=\"posts\" />\r\n \u003C/section>\r\n \u003C/div>\r\n \r\n \u003C/div>\r\n \u003C/div>\r\n \u003CAppFooter />\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport AppHeader from '~/components/AppHeader'\r\nimport AppNavigation from '~/components/AppNavigation'\r\nimport AppFooter from '~/components/AppFooter'\r\nimport TwitterFollowMe from '~/components/TwitterFollowMe'\r\nimport PostsSidebar from '~/components/PostsSidebar'\r\nimport { getPosts } from '~/services/wpContentApi'\r\n\r\nexport default {\r\n components: { AppHeader, AppNavigation, AppFooter, TwitterFollowMe, PostsSidebar },\r\n data () {\r\n return {\r\n posts: []\r\n }\r\n },\r\n async created () {\r\n this.posts = await getPosts(20)\r\n }\r\n}\r\n\u003C/script>\r\n```\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/c1197\">#c1197\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3130,3133],{"name":3131,"color":3132},"question","cc317c",{"name":3057,"color":3058},1351,"Server Side Rendering for components called from layouts","2023-01-18T15:41:42Z","https://github.com/nuxt/nuxt/issues/1351",0.7292526,["Reactive",3140],{},["Set"],["ShallowReactive",3143],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fzbwgAeMXesdB9K77NqVZXva2HSUUhI3rgmlmVyBJvAE":-1},"/nuxt/ui/2888"]