\n\n\u003Cimg width=\"1315\" height=\"541\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e12e8c0c-9e43-45ee-8e81-5ee9ff1e8c50\" />",[3139,3142],{"name":3140,"color":3141},"question","d876e3",{"name":3143,"color":3144},"v3","49DCB8",4721,"nuxt","ui","open","Multi-column pinning behavior differs from TanStack Table - only first pinned column remains sticky","2025-08-12T14:56:56Z","https://github.com/nuxt/ui/issues/4721",0.7709078,{"description":3154,"labels":3155,"number":3163,"owner":3146,"repository":3147,"state":3148,"title":3164,"updated_at":3165,"url":3166,"score":3167},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, devtools, compatibilityDate, future, css\n- Runtime Modules: @nuxt/ui@3.1.1\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\n### Description\n\nWe're defining our typography style guide as custom utilities that consist of `font-size` and `font-weight` declarations like so\n\n```css\n/* main.css */\n@import 'tailwindcss'\n@import 'nuxt/ui'\n\n@utility text-display-1 {\n font-size: 54px;\n font-weight: 600;\n}\n\n@utility text-display-2 {\n ...\n}\n```\n\nWhen applying custom utilities to Nuxt UI components, whether globally in `app.config` or individually via the `ui` prop, only one class is applied, and the other is discarded. For example, with the Button component has `text-sm font-medium` applied by default to the `base` slot, passing `text-display-1` to that slot only overrides the size (blue arrow in the screenshot) while the weight still uses the `font-medium` class (red arrows in the screenshot)\n\n\n\nCommenting either one of the classes applies the other correctly. The problem happens only if there are two (or more?) classes\n\n### Additional context\n\nWe workaround this by marking the class as important `!text-display-1`\n\n### Logs\n\n```shell-script\n\n```",[3156,3159,3160],{"name":3157,"color":3158},"bug","d73a4a",{"name":3143,"color":3144},{"name":3161,"color":3162},"triage","ffffff",4303,"Custom utility with 2 or more declarations are not applied correctly","2025-06-09T18:00:28Z","https://github.com/nuxt/ui/issues/4303",0.7729978,{"description":3169,"labels":3170,"number":3177,"owner":3146,"repository":3147,"state":3178,"title":3179,"updated_at":3180,"url":3181,"score":3182},"### Description\r\n\r\nSpanning columns in tables should be common...\r\n\r\nBut the `\u003Ccolumn>-data` slot is rendered in the `\u003Ctd>`. It would be better if there was a `row-data` slot.\r\n\r\nIs there any way to determine whether it needs to span columns based on some property of row?",[3171,3172,3175],{"name":3140,"color":3141},{"name":3173,"color":3174},"closed-by-bot","ededed",{"name":3176,"color":3174},"stale",2053,"closed","How to span columns in UTable?","2025-06-18T09:06:29Z","https://github.com/nuxt/ui/issues/2053",0.734584,{"description":3184,"labels":3185,"number":3189,"owner":3146,"repository":3146,"state":3178,"title":3190,"updated_at":3191,"url":3192,"score":3193},"Hey!\r\n\r\nWith our current project, me and the team was wondering what was the reasoning behind the decision to not support slots in layouts?\r\n\r\nWe ran into it when we realized that a CSS grid layout would work best for our responsive view, since each page knows what kind of sidebar or extra content is required in this specific case. For that the structure would need to be like this:\r\n\r\n```\r\nhtml\r\n head\r\n ...\r\n body\r\n my-header\r\n nuxt\r\n #content\r\n slot\r\n #sidebar\r\n slot(name=\"sidebar\")\r\n #extra\r\n slot(name=\"extra\")\r\n my-footer\r\n```\r\nRight now the two options we see are using a separate layout component or somehow coordinating sidebar and extra components to make their own requests according to current route, but both feel at odds with overall simplicity Nuxt aims for.\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/c941\">#c941\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3186],{"name":3187,"color":3188},"2.x","d4c5f9",1079,"Why no slots in layouts?","2023-01-18T15:40:44Z","https://github.com/nuxt/nuxt/issues/1079",0.7416704,{"description":3195,"labels":3196,"number":3202,"owner":3146,"repository":3147,"state":3178,"title":3203,"updated_at":3204,"url":3205,"score":3206},"### Description\n\nDescription:\nI am currently using the UTable component from Nuxt UI and have encountered a limitation regarding the customization of table headers. Specifically, I need to create a table with multi-row headers and the ability to merge columns using colspan. For example, the multi-row spanning column headers shown in the image.However, the current implementation of the UTable component does not seem to support this feature.\n\n\nCurrent Behavior:\n\nThe header property allows for custom content using the h function, but it is limited to single-column customization.\nThe available slots are primarily designed for single-column or specific row customization and do not support multi-column header customization.\nExpected Behavior:\n\nAbility to define headers that span multiple rows and columns.\nSupport for colspan and rowspan attributes in the header configuration to allow for more complex table layouts.\nEnhanced slot functionality to support multi-column header customization.\nUse Case:\nThis feature is essential for creating complex data tables where grouped headers are necessary for better data organization and presentation. It is particularly useful in scenarios where data needs to be categorized under broader headings.\n\nProposed Solution:\n\nIntroduce a mechanism in the UTable component to allow for multi-row and multi-column header definitions.\nProvide examples and documentation on how to implement these features using the existing API or through new enhancements.\nConsider expanding the slot functionality to support more complex header customizations.\nAdditional Context:\n\nThis feature is commonly supported in other table libraries and would greatly enhance the flexibility and usability of the UTable component in Nuxt UI.\nEnvironment:\n\nNuxt UI version: [3.0.0-alpha.12]\nNuxt version: [^3.15.4]\n\nRelated Issues Link:\nhttps://github.com/nuxt/ui/issues/1289#issuecomment-2652919275\nhttps://github.com/nuxt/ui/issues/1651\nhttps://github.com/nuxt/ui/issues/2053\n\nRelated Documentation Link:\nhttps://ui3.nuxt.dev/components/table\n\n### Additional context\n\n_No response_",[3197,3200,3201],{"name":3198,"color":3199},"enhancement","a2eeef",{"name":3143,"color":3144},{"name":3161,"color":3162},3296,"Support for Multi-Row and Colspan Headers in UTable Component","2025-07-01T12:05:35Z","https://github.com/nuxt/ui/issues/3296",0.74707615,{"description":3208,"labels":3209,"number":3216,"owner":3146,"repository":3146,"state":3178,"title":3217,"updated_at":3218,"url":3219,"score":3220},"### Describe the feature\n\nOnly home is a different layout, all the internals of the site are the same, so I would like to use: \u003CNuxtLayout name=\"home\"> for initial, but in the internals I would like to use the default layout.\r\n\r\nBut it doesn't work:\r\n\r\n```\r\n\u003Ctemplate #preContent>\r\n \u003Cdiv class=\"sum-class\">\r\n SomeContent here\r\n \u003C/div>\r\n \u003C/template>\r\n```\r\n\r\nIf this functionality already exists, I haven't found it in the documentation.\r\n```\r\n\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v18.13.0`\r\n- Nuxt Version: `3.3.1`\r\n- Nitro Version: `2.3.1`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `directus`, `modules`, `app`, `imports`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@6.6.3`, `nuxt-icon@0.3.3`, `nuxt-directus@5.1.1`, `@pinia/nuxt@0.4.7`\r\n- Build Modules: `-`\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).",[3210,3213],{"name":3211,"color":3212},"3.x","29bc7f",{"name":3214,"color":3215},"pending triage","E99695",19859,"Use the named slot templates with default layout","2023-03-22T15:39:14Z","https://github.com/nuxt/nuxt/issues/19859",0.7511905,{"description":3222,"labels":3223,"number":3229,"owner":3146,"repository":3147,"state":3178,"title":3230,"updated_at":3231,"url":3232,"score":3233},"### Environment\n\n- Vue 3.5.12\n- Node 20.19.0\n- MacOS\n- Vite 6.3.2\n- Nuxt UI 3.0.2/3.1.0\n\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.0.2/3.0.1\n\n### Reproduction\n\n\nreproduction:\nhttps://codesandbox.io/p/devbox/jolly-minsky-c2hdtr\n\n\n\n### Description\n\nWhen using Nuxt UI v 3.0.2 and 3.1.0, both appear to experience an issue with the Table component and the width of the table due to columns that have enough data in them for the character count to exceed to size of the screen. I believe the `whitespace-nowrap` class being applied globally to the `td` slot is the main source of the issue. Furthermore, when the `whitespace-nowrap` class is applied, then any width class you try to apply to the column definition will apply in the html, but doesn't actually appear to limit the overall width of the column. \n\nThe only way I have found that will actually make the column the desired width is replace the `whitespace-nowrap` class with `whitespace-normal` class via:\n1. Global change to the `td` slot via vite.config to something like this: `table: { slots: { td: 'p-4 text-sm text-muted whitespace-normal [&:has([role=checkbox])]:pe-0' } }`\n2. The `ui` prop on the table with something like this: `:ui=\"{ td: 'whitespace-normal p-4 text-sm text-muted [&:has([role=checkbox])]:pe-0' }\"`\n3. Add `whitespace-normal` in the column def via the meta class `{ meta: { class: { td: 'w-20 whitespace-normal' } } }`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3224,3225,3226,3227,3228],{"name":3157,"color":3158},{"name":3143,"color":3144},{"name":3161,"color":3162},{"name":3173,"color":3174},{"name":3176,"color":3174},3988,"Table component width overflows screen when column data is large","2025-08-20T02:08:53Z","https://github.com/nuxt/ui/issues/3988",0.7549213,{"description":3235,"labels":3236,"number":3238,"owner":3146,"repository":3146,"state":3178,"title":3239,"updated_at":3240,"url":3241,"score":3242},"### Describe the feature\n\nTeleports suck cause they're not SSR friendly, but there's no other way to allow a page to fill in multiple separate areas (slots) defined by the layout. A classic example is that the main slot is for the main page content and then a second named slot could be used for the sidebar.\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).",[3237],{"name":3214,"color":3215},30563,"Named slots in layouts","2025-01-13T13:54:08Z","https://github.com/nuxt/nuxt/issues/30563",0.7572459,{"description":3244,"labels":3245,"number":3249,"owner":3146,"repository":3146,"state":3178,"title":3250,"updated_at":3251,"url":3252,"score":3253},"### What problem does this feature solve?\n\nIs there a way to use Layouts across multiple (non-child) pages?\n\nThis is a very common use-case: Multiple pages need to look the same (3-column layout). What is the best way to do this without duplicating the HTML markup all over the place?\n\nHere's a real example from one of my sites right now:\n\nFeed Page:\n```\n\u003Ctemplate>\n \u003Cdiv class=\"container tw-px-1 md:tw-px-2\">\n \u003Cdiv class=\"tw-mt-4\">\n \u003Cdiv class=\"tw-flex tw-flex-wrap tw-mb-4\">\n\n \u003Cdiv class=\"tw-flex-shrink-0 tw-hidden md:tw-block tw-w-full md:tw-w-4/12 lg:tw-w-3/12 md:tw-px-4\">\n \u003Cdiv>\n CONTENT FOR THE FEED PAGE: LEFT SIDEBAR GETS ADDED HERE\n \u003C/div>\n\n \u003Cdiv class=\"tw-w-full md:tw-w-8/12 lg:tw-w-6/12 md:tw-px-0\">\n \u003Cdiv>\n CONTENT FOR THE FEED PAGE: MIDDLE COLUMN GETS ADDED HERE\n \u003C/div>\n \u003C/div>\n \n \u003Cdiv class=\"tw-flex-shrink-0 tw-hidden lg:tw-block md:tw-w-4/12 lg:tw-w-3/12 lg:tw-px-4\">\n \u003Cdiv>\n CONTENT FOR THE FEED PAGE: RIGHT SIDEBAR GETS ADDED HERE\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n```\n\n\nTags Page:\n```\n\u003Ctemplate>\n \u003Cdiv class=\"container tw-px-1 md:tw-px-2\">\n \u003Cdiv class=\"tw-mt-4\">\n \u003Cdiv class=\"tw-flex tw-flex-wrap tw-mb-4\">\n\n \u003Cdiv class=\"tw-flex-shrink-0 tw-hidden md:tw-block tw-w-full md:tw-w-4/12 lg:tw-w-3/12 md:tw-px-4\">\n \u003Cdiv>\n CONTENT FOR THE TAGS PAGE: LEFT SIDEBAR GETS ADDED HERE\n \u003C/div>\n\n \u003Cdiv class=\"tw-w-full md:tw-w-8/12 lg:tw-w-6/12 md:tw-px-0\">\n \u003Cdiv>\n CONTENT FOR THE TAGS PAGE: MIDDLE COLUMN GETS ADDED HERE\n \u003C/div>\n \u003C/div>\n \n \u003Cdiv class=\"tw-flex-shrink-0 tw-hidden lg:tw-block md:tw-w-4/12 lg:tw-w-3/12 lg:tw-px-4\">\n \u003Cdiv>\n CONTENT FOR THE TAGS PAGE: RIGHT SIDEBAR GETS ADDED HERE\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\n```\nAs you can see in the above (simplified) example, the Feed page and Tag page share the SAME HTML structure and have a 3-column layout, but their CONTENT is completely different. I couldn't find a way to include slots within layout files. Is this possible? \nThis is a very common scenario where your entire site may want to use the same layout and you have to \"inject\" content into the right slots - how do you solve this problem? I am struggling to imagine how there isn't a solution to this problem in Nuxt.\n\nNote:\nThese are NOT child-pages (or child routes) of each other, so using nuxt child pages isn't an option.\nSelectively showing / hiding content with v-if is clunky and not an option.\nUsing [component slots](https://alligator.io/vuejs/component-slots/) isn't an option because the content that should go into these slots doesn't really fit the definition of a \"component\".\n\n\n### What does the proposed changes look like?\n\nNot sure if there's a way to use slots within layout files....but I need a solution to this.\n\n\u003C!--cmty-->\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/c9769\">#c9769\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3246,3248],{"name":3198,"color":3247},"8DEF37",{"name":3187,"color":3188},6408,"Using Layouts across multiple (non-child) pages","2023-01-22T15:51:03Z","https://github.com/nuxt/nuxt/issues/6408",0.7585913,{"description":3255,"labels":3256,"number":3258,"owner":3146,"repository":3146,"state":3178,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### Environment\n\n- Operating System: Darwin\n- Node Version: v18.20.3\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.3\n- Package Manager: pnpm@9.5.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, @nuxt/icon@1.6.1, @nuxtjs/i18n@9.1.0, @nuxt/fonts@0.10.3\n- Build Modules: -\n\n### Reproduction\n\n```vue\n\u003Ctemplate>\n \u003Ctable class=\"table-auto border-collapse\">\n \u003Ccaption class=\"caption-bottom\">\n Table 1: Caption\n \u003C/caption>\n \u003Cthead>\n \u003Ctr>\n \u003Cth>Id\u003C/th>\n \u003Cth>Code\u003C/th>\n \u003Cth>Name\u003C/th>\n \u003C/tr>\n \u003C/thead>\n \u003Ctbody>\n \u003Ctr v-for=\"n in 5\">\n \u003Ctd>{{ n }}\u003C/td>\n \u003Ctd>Code-{{ n }}\u003C/td>\n \u003Ctd>Name-{{ n }}\u003C/td>\n \u003C/tr>\n \u003C/tbody>\n \u003C/table>\n\u003C/template>\n```\n\n### Describe the bug\n\nThe `table-auto` and `border-collapse` classes [from the Tilewind stylesheet](https://tailwindcss.com/docs/table-layout) do not work, but the `caption-bottom` class does work (changes the position of the caption).\n\nTilewind is not fully imported and only partially supported?",[3257],{"name":3214,"color":3215},30326,"Partial Tilewind support using Table Layouts as an example","2024-12-23T10:42:10Z","https://github.com/nuxt/nuxt/issues/30326",0.75984603,["Reactive",3264],{},["Set"],["ShallowReactive",3267],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fR_Vy5zUSzEpXCu0E1W92G9PXqPy8WzZp5ydY9MDgGEY":-1},"/nuxt/ui/4862"]