\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",[3018,3021],{"name":3019,"color":3020},"question","d876e3",{"name":3022,"color":3023},"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":3033,"labels":3034,"number":1660,"owner":3025,"repository":3041,"state":3042,"title":3043,"updated_at":3044,"url":3045,"score":3046},"",[3035,3038],{"name":3036,"color":3037},"enhancement","a2eeef",{"name":3039,"color":3040},"provider","1161A4","fonts","closed","adobe fonts provider","2024-03-12T23:29:19Z","https://github.com/nuxt/fonts/issues/11",0.7159956,{"description":3048,"labels":3049,"number":3052,"owner":3025,"repository":3026,"state":3042,"title":3053,"updated_at":3054,"url":3055,"score":3056},"### 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_",[3050,3051],{"name":3036,"color":3037},{"name":3022,"color":3023},4475,"Support inline `style` in `\u003CUTable>` via `meta.style`","2025-07-14T08:56:29Z","https://github.com/nuxt/ui/issues/4475",0.7177863,{"description":3058,"labels":3059,"number":3063,"owner":3025,"repository":3025,"state":3042,"title":3064,"updated_at":3065,"url":3066,"score":3067},"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>",[3060],{"name":3061,"color":3062},"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":3069,"labels":3070,"number":3074,"owner":3025,"repository":3025,"state":3042,"title":3075,"updated_at":3076,"url":3077,"score":3078},"\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",[3071],{"name":3072,"color":3073},"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":3080,"number":3085,"owner":3025,"repository":3025,"state":3042,"title":3086,"updated_at":3087,"url":3088,"score":3089},[3081,3084],{"name":3082,"color":3083},"3.x","29bc7f",{"name":3072,"color":3073},13101,"Cannot read properties of undefined (reading '_uid')","2023-01-19T16:57:40Z","https://github.com/nuxt/nuxt/issues/13101",0.7245277,{"labels":3091,"number":3093,"owner":3025,"repository":3025,"state":3042,"title":3094,"updated_at":3095,"url":3096,"score":3097},[3092],{"name":3061,"color":3062},6094,"computed property based on innerWidth / window.innerWidth","2025-01-31T18:15:36Z","https://github.com/nuxt/nuxt/issues/6094",0.7249355,{"description":3099,"labels":3100,"number":3101,"owner":3025,"repository":3102,"state":3042,"title":3103,"updated_at":3104,"url":3105,"score":3106},"- [ ] 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,{"labels":3108,"number":3119,"owner":3025,"repository":3025,"state":3042,"title":3120,"updated_at":3121,"url":3122,"score":3123},[3109,3110,3113,3116],{"name":3082,"color":3083},{"name":3111,"color":3112},"bug","d73a4a",{"name":3114,"color":3115},"vite","3574D1",{"name":3117,"color":3118},"upstream","E8A36D",12050,"Don't work with class-style component","2023-01-19T15:54:28Z","https://github.com/nuxt/nuxt/issues/12050",0.7255791,{"description":3125,"labels":3126,"number":3128,"owner":3025,"repository":3025,"state":3042,"title":3129,"updated_at":3130,"url":3131,"score":3132},"Nuxt 3 should provide defaults headers for best developer experience.\n\n```js\n{ charset: 'utf-8' }\n{ name: 'viewport', content: 'width=device-width, initial-scale=1' }\n```\n\nWe shall also provide a key for uniqueness (`hid` for vue-meta)",[3127],{"name":3082,"color":3083},11459,"app: Head defaults","2023-01-19T15:28:14Z","https://github.com/nuxt/nuxt/issues/11459",0.72611266,["Reactive",3134],{},["Set"],["ShallowReactive",3137],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f8ap48xc9zvBSgU6Z7ZTSYH_v5fYNwdIfmpnDUnz-wXc":-1},"/nuxt/ui/2092"]