\n \u003Cp class=\"text-sm font-medium\">\n {{ namesData.length === 0 ? 'No names loaded' : 'No names found' }}\n \u003C/p>\n \u003Cp class=\"text-xs text-neutral-500 mt-1\">\n {{ namesData.length === 0 ? 'Click \"Load Names\" to fetch data' : 'Try adjusting your search query' }}\n \u003C/p>\n \u003C/div>\n \u003C/template>\n \u003C/UTable>\n```\n\u003C/details>\n\nThe problem:\nHeight of row get bigger when more items added and get smaller while scrolling down, here is the example with 100 Row:\n\nFirst item height:\n\u003Cimg width=\"1217\" height=\"386\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/d74589f7-a6b3-45ea-afe9-6f7f9ef7ba2d\" />\n\nat middle:\n\u003Cimg width=\"1219\" height=\"386\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/653a9f5d-1702-401f-a437-4f61c6c4776e\" />\n\nat end:\n\u003Cimg width=\"1214\" height=\"386\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b081a95c-5ffe-4d8e-ab57-64f978cebeea\" />\n\ni tired to play with `UTable.ui` object but that break the style no mater what i do, sometime head col not align with row cells",[3137,3140],{"name":3138,"color":3139},"question","d876e3",{"name":3141,"color":3142},"v3","49DCB8",4563,"nuxt","ui","open","`useVirtualList` example for `UTable`","2025-07-21T11:23:04Z","https://github.com/nuxt/ui/issues/4563",0.7298672,{"description":3152,"labels":3153,"number":3161,"owner":3144,"repository":3145,"state":3146,"title":3162,"updated_at":3163,"url":3164,"score":3165},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.16.0\n- Nuxt Version: 4.0.3\n- CLI Version: 3.27.0\n- Nitro Version: 2.12.4\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: compatibilityDate, modules, typescript, css, experimental\n- Runtime Modules: @nuxt/ui-pro@3.3.0, @nuxt/eslint@1.8.0, @nuxt/test-utils/module@3.19.2, @pinia/colada-nuxt@0.2.1, @pinia/nuxt@0.11.2\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.3.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/vigorous-flower-n6xmzr\n\n### Description\n\nWhen table data contains empty strings, a hydration error is thrown in the console.\n\nSee attached reproduction.\n\nIts not clear if this needs to be resolved upstream, or if its something we can resolve here.\n\n### Additional context\n\nSame issue occurs for column definitions whether the label is set to an empty string. Ref: #2976 \n\n### Logs\n\n```shell-script\n\n```",[3154,3157,3158],{"name":3155,"color":3156},"bug","d73a4a",{"name":3141,"color":3142},{"name":3159,"color":3160},"triage","ffffff",4725,"`Utable` should gracefully handle empty strings","2025-08-12T18:18:24Z","https://github.com/nuxt/ui/issues/4725",0.732529,{"description":3167,"labels":3168,"number":3177,"owner":3144,"repository":3145,"state":3178,"title":3179,"updated_at":3180,"url":3181,"score":3182},"### 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```",[3169,3170,3171,3172,3175],{"name":3155,"color":3156},{"name":3141,"color":3142},{"name":3159,"color":3160},{"name":3173,"color":3174},"closed-by-bot","ededed",{"name":3176,"color":3174},"stale",3988,"closed","Table component width overflows screen when column data is large","2025-08-20T02:08:53Z","https://github.com/nuxt/ui/issues/3988",0.69468594,{"description":3184,"labels":3185,"number":1677,"owner":3144,"repository":3192,"state":3178,"title":3193,"updated_at":3194,"url":3195,"score":3196},"",[3186,3189],{"name":3187,"color":3188},"enhancement","a2eeef",{"name":3190,"color":3191},"provider","1161A4","fonts","adobe fonts provider","2024-03-12T23:29:19Z","https://github.com/nuxt/fonts/issues/11",0.7159956,{"description":3198,"labels":3199,"number":3202,"owner":3144,"repository":3145,"state":3178,"title":3203,"updated_at":3204,"url":3205,"score":3206},"### Description\n\nHi, first of all thanks for Nuxt UI, it's a great library that makes building interfaces in Nuxt fast and enjoyable. Really appreciate the work you're putting into it.\n\n## Context\n\nThe `\u003CUTable>` component currently supports conditional class names via `meta.class.tr` (from `TableMeta`) and `meta.class.th` / `meta.class.td` (from `ColumnMeta`). This works well in most cases with Tailwind.\n\nHowever, it’s not possible today to apply inline styles dynamically — for example, to set background colors or custom widths based on data. This creates limitations in use cases where:\n\n- Tailwind classes are too generic or not granular enough \n- Style values are truly dynamic (e.g. coming from user data or configs) \n\n## Proposal\n\nAdd support for `meta.style`, mirroring the structure of `meta.class`, with the following API shape:\n\n```ts\nmeta {\n style?: {\n tr?: string | ((row: Row\u003CTData>) => string);\n };\n}\n\n\nmeta: {\n style?: {\n th?: string | ((cell: Header\u003CTData, TValue>) => string);\n td?: string | ((cell: Cell\u003CTData, TValue>) => string);\n }\n}\n```\n\n## Example usage\n\n```vue\n\u003CUTable\n :data=\"data\"\n :columns=\"columns\"\n :meta=\"{\n style: {\n tr: row => row.age \u003C 18 ? { backgroundColor: '#fff0f0' } : {},\n }\n }\"\n/>\n```\n\n## Why this matters\n\n- It improves flexibility for styling without requiring full slot overrides \n- It handles dynamic styles that can’t be expressed with Tailwind classes \n- It aligns with the existing `meta.class` design in both `TableMeta` and `ColumnMeta`, keeping things consistent and declarative\n\n### Additional context\n\n_No response_",[3200,3201],{"name":3187,"color":3188},{"name":3141,"color":3142},4475,"Support inline `style` in `\u003CUTable>` via `meta.style`","2025-07-14T08:56:29Z","https://github.com/nuxt/ui/issues/4475",0.7177863,{"description":3208,"labels":3209,"number":3213,"owner":3144,"repository":3144,"state":3178,"title":3214,"updated_at":3215,"url":3216,"score":3217},"I'm building my app locally and everything is fine. When i'm trying to reach it on server i have empty layout without any rendered components.\r\n\r\nThis is markup from server:\r\n\r\n\r\n\r\nAs you can see there is no other scrips then this tiny one with `__NUXT` notation.\r\n\r\nThis is default layout:\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cmain>\r\n \u003Capp-header>\u003C/app-header>\r\n \u003Cdiv class=\"g-content box-grid-vertical_align_middle\">\r\n \u003Cdiv class=\"shift-padding_6-vertical box-full_width-grid\">\r\n \u003Cdiv class=\"column-width_2\">\u003C/div>\r\n \u003Cdiv class=\"column-width_8 shift-padding_6-horizontal\">\r\n \u003Cnuxt>\u003C/nuxt>\r\n \u003C/div>\r\n \u003Cdiv class=\"column-width_2\">\u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/main>\r\n\u003C/template>\r\n```\r\n\r\nI'm using latest version of nuxt and `2.5.3` version of vue router.\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/c808\">#c808\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3210],{"name":3211,"color":3212},"2.x","d4c5f9",939,"App is not rendering layout components on server","2023-01-18T15:40:36Z","https://github.com/nuxt/nuxt/issues/939",0.7208297,{"description":3219,"labels":3220,"number":3224,"owner":3144,"repository":3144,"state":3178,"title":3225,"updated_at":3226,"url":3227,"score":3228},"\r\n**(Need Help) Encountering Warnings When Using Nuxt3 + shadcnUI and Unsure How to Fix Them**\r\n\r\nHere’s the component code:\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { DialogRoot, VisuallyHidden } from \"radix-vue\";\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv id=\"index-side-bar\">\r\n \u003Cslot />\r\n \u003CSheet :default-open=\"true\">\r\n \u003CSheetContent :side=\"'left'\" class=\"outline-0 p-0 w-[240px] z-[99999]\">\r\n \u003CVisuallyHidden>\r\n \u003CSheetHeader>\r\n \u003CSheetTitle>dialog\u003C/SheetTitle>\r\n \u003CSheetDescription>description\u003C/SheetDescription>\r\n \u003C/SheetHeader>\r\n \u003C/VisuallyHidden>\r\n \u003Cdiv style=\"width: 100%; height: 100vh; display: flex; flex-direction: column;\">\r\n \u003C!-- Header -->\r\n \u003Cdiv class=\"w-full h-[56px] flex items-center sm:h-[48px]\">\r\n \u003Cdiv class=\"w-full h-[56px] flex items-center ml-[14px] sm:ml-[16px]\">\r\n \u003Cdiv class=\"w-10 h-10 flex items-center justify-center sm:hidden\">\r\n \u003C!-- SVG Icon Placeholder -->\r\n \u003C/div>\r\n \u003Cdiv class=\"w-[120px] h-[56px] sm:w-auto sm:h-[48px]\" style=\"display: flex; justify-content: center; align-items: center;\">\r\n \u003Cdiv class=\"w-[94px] h-[30px]\">\r\n \u003C!-- Logo Placeholder -->\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C!-- Footer -->\r\n \u003Cdiv class=\"sidebar_toolbar\">\r\n \u003CSheetClose class=\"outline-0\">\r\n \u003CNuxtLayout name=\"tab-toolbar-nav-menu\" />\r\n \u003C/SheetClose>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/SheetContent>\r\n \u003C/Sheet>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nShadcnUI Sheet.vue:\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue';\r\n\r\nconst props = defineProps\u003CDialogRootProps>();\r\nconst emits = defineEmits\u003CDialogRootEmits>();\r\nconst forwarded = useForwardPropsEmits(props, emits);\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CDialogRoot v-bind=\"forwarded\">\r\n \u003Cslot />\r\n \u003C/DialogRoot>\r\n\u003C/template>\r\n```\r\n\r\n**The warning message:**\r\n\r\n```text\r\n[Vue warn]: Extraneous non-props attributes (data-v-e01f9c95) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.\r\n at \u003CDialogRoot defaultOpen=true onUpdate:open=fn data-v-e01f9c95=\"\" >\r\n at \u003CSheet default-open=true >\r\n at \u003CSideBar ref=Ref\u003C undefined > >\r\n```\r\n\r\nThis warning has appeared multiple times and only occurs on the server side. No warnings appear on the client side.\r\n\r\nThrough testing, I found that switching to the `DialogRoot` component eliminates the warnings. The warnings reappear when using the `Sheet` component.\r\n\r\nHere’s the alternative component:\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { DialogRoot, VisuallyHidden } from \"radix-vue\";\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv id=\"index-side-bar\">\r\n \u003Cslot />\r\n \u003CDialogRoot :default-open=\"true\">\r\n \u003CSheetContent :side=\"'left'\" class=\"outline-0 p-0 w-[240px] z-[99999]\">\r\n \u003CVisuallyHidden>\r\n \u003CSheetHeader>\r\n \u003CSheetTitle>dialog\u003C/SheetTitle>\r\n \u003CSheetDescription>description\u003C/SheetDescription>\r\n \u003C/SheetHeader>\r\n \u003C/VisuallyHidden>\r\n \u003Cdiv style=\"width: 100%; height: 100vh; display: flex; flex-direction: column;\">\r\n \u003C!-- Header -->\r\n \u003Cdiv class=\"w-full h-[56px] flex items-center sm:h-[48px]\">\r\n \u003Cdiv class=\"w-full h-[56px] flex items-center ml-[14px] sm:ml-[16px]\">\r\n \u003Cdiv class=\"w-10 h-10 flex items-center justify-center sm:hidden\">\r\n \u003C!-- SVG Icon Placeholder -->\r\n \u003C/div>\r\n \u003Cdiv class=\"w-[120px] h-[56px] sm:w-auto sm:h-[48px]\" style=\"display: flex; justify-content: center; align-items: center;\">\r\n \u003Cdiv class=\"w-[94px] h-[30px]\">\r\n \u003C!-- Logo Placeholder -->\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C!-- Footer -->\r\n \u003Cdiv class=\"sidebar_toolbar\">\r\n \u003CSheetClose class=\"outline-0\">\r\n \u003CNuxtLayout name=\"tab-toolbar-nav-menu\" />\r\n \u003C/SheetClose>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/SheetContent>\r\n \u003C/DialogRoot>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n**When using DevTools**, the same warning occurs, similar to the server-side warning, but it doesn’t appear on the client side:\r\n\r\n```text\r\n[Vue warn]: Extraneous non-props attributes (data-v-inspector) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.\r\n at \u003CDialogRoot default-open=true data-v-inspector=\"layouts/index/SideBar.vue:16:7\" >\r\n at \u003CSideBar data-v-inspector=\"app.vue:4:7\" ref=Ref\u003C undefined > >\r\n at \u003CLayoutLoader key=\"index-side-bar\" layoutProps= { 'data-v-inspector': 'app.vue:4:7',\r\n```\r\n\r\nI have already disabled DevTools with `componentInspector: false`.\r\n\r\nGitHub link: [Nuxt DevTools Issue #722](https://github.com/nuxt/devtools/issues/722).\r\n",[3221],{"name":3222,"color":3223},"pending triage","E99695",29002,"(Need Help) Encountering Warnings When Using Nuxt3 + shadcnUI and Unsure How to Fix Them","2024-09-17T08:13:28Z","https://github.com/nuxt/nuxt/issues/29002",0.7237925,{"labels":3230,"number":3235,"owner":3144,"repository":3144,"state":3178,"title":3236,"updated_at":3237,"url":3238,"score":3239},[3231,3234],{"name":3232,"color":3233},"3.x","29bc7f",{"name":3222,"color":3223},13101,"Cannot read properties of undefined (reading '_uid')","2023-01-19T16:57:40Z","https://github.com/nuxt/nuxt/issues/13101",0.7245277,{"labels":3241,"number":3243,"owner":3144,"repository":3144,"state":3178,"title":3244,"updated_at":3245,"url":3246,"score":3247},[3242],{"name":3211,"color":3212},6094,"computed property based on innerWidth / window.innerWidth","2025-01-31T18:15:36Z","https://github.com/nuxt/nuxt/issues/6094",0.7249355,{"description":3249,"labels":3250,"number":3251,"owner":3144,"repository":3252,"state":3178,"title":3253,"updated_at":3254,"url":3255,"score":3256},"- [ ] nav broken in mobile\n\n\n- [ ] AppCard component : \n- border + color (mobile + desktop) in docs/community/nuxt-community cf. figma : https://www.figma.com/file/3yI3EtwxPjZwiqQrW9OLnH/%E2%9B%B0%EF%B8%8F---User-Interface?node-id=333%3A38212\n\n\n- Module page : links broken\n\n- [ ] buttons : buttons filter broken \nhttps://volta.s3.fr-par.scw.cloud/Clean_Shot_2023_02_28_at_14_07_56_69ff905071.mp4\n- [ ] darkmode: [home]\n\n\n\n\n",[],1252,"nuxt.com","Review : refactor ui components with Pinceau","2023-03-13T08:54:41Z","https://github.com/nuxt/nuxt.com/issues/1252",0.72495824,["Reactive",3258],{},["Set"],["ShallowReactive",3261],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f8ap48xc9zvBSgU6Z7ZTSYH_v5fYNwdIfmpnDUnz-wXc":-1},"/nuxt/ui/2092"]