\n\u003C/UCard>\n```\n\n### Description\n\nIf using a UTable component on a background that isn't the default neutral color the bg-color of the thead is visible.\n\n\n\n\n\n_A little bit easier to see with white Background_\n\n\n\n\nMaybe this is a wanted behavior. So if so please ignore and close the issue.\nI know sometimes you want a background color in the headlines. But sometimes you don't want them.\nAnyways if this is a wanted behavior, then maybe this issue will help those who don't want a background color and are looking for a solution.\n\n### Additional context\n\nCould be fixed by adding:\n```vue\n:ui=\"{\n thead: 'bg-unset'\n}\"\n```\nto the `\u003CUTable>` tag\n\n\n\n### Logs\n\n```shell-script\n-\n```",[3033,3036,3039,3042,3045],{"name":3034,"color":3035},"bug","d73a4a",{"name":3037,"color":3038},"v3","49DCB8",{"name":3040,"color":3041},"triage","ffffff",{"name":3043,"color":3044},"closed-by-bot","ededed",{"name":3046,"color":3044},"stale",3607,"Background-Color for UTable","2025-06-18T09:01:26Z","https://github.com/nuxt/ui/issues/3607",0.6991637,{"description":3053,"labels":3054,"number":3057,"owner":3023,"repository":3024,"state":3025,"title":3058,"updated_at":3059,"url":3060,"score":3061},"### Environment\n\n\"@vueuse/nuxt\": \"^13.1.0\"\n\"@nuxt/ui\": \"^3.1.2\"\nnode: lts/jod (22.11.0)\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\n\n\n\n\n### Description\n\nWhen using the UTab component with the variant=\"link\", applying custom CSS classes to enable horizontal scrolling (e.g., overflow-x: auto; or equivalent utility classes) causes the visual style indicating the currently active tab to be lost or overridden.\n\n```js\n{\n variant: 'link',\n ui: {\n list: 'bg-white overflow-x-auto overflow-y-hidden',\n trigger: 'min-w-auto'\n }\n}\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3055,3056],{"name":3034,"color":3035},{"name":3037,"color":3038},4198,"UTabs style issue","2025-05-23T13:23:24Z","https://github.com/nuxt/ui/issues/4198",0.70144314,{"description":3063,"labels":3064,"number":3069,"owner":3023,"repository":3024,"state":3025,"title":3070,"updated_at":3071,"url":3072,"score":3073},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.17.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.9.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/test-utils/module@3.14.4, @nuxt/eslint@0.7.1, @nuxt/ui@2.20.0, @nuxt/icon@1.8.2, @pinia/nuxt@0.5.5, @nuxtjs/i18n@9.1.0\n- Build Modules: -\n\n### Version\n\nv2.20.0\n\n### Reproduction\n\nhttps://github.com/nuxt/ui/blob/c0455c831f06b3f7662c964abe6e36f9221afe48/src/runtime/components/data/Table.vue#L11\n\n### Description\n\nFor some reason (probably just typo mistake) `th` element of `u-table` component uses styles from `tr.base`. Is it a feature? Looks like a bug :)\nhttps://github.com/nuxt/ui/blob/c0455c831f06b3f7662c964abe6e36f9221afe48/src/runtime/components/data/Table.vue#L11\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3065,3066,3067,3068],{"name":3034,"color":3035},{"name":3040,"color":3041},{"name":3043,"color":3044},{"name":3046,"color":3044},2946,"Expand table header uses styles from 'ui.tr.base'","2025-06-18T09:05:12Z","https://github.com/nuxt/ui/issues/2946",0.71211666,{"description":3075,"labels":3076,"number":3079,"owner":3023,"repository":3024,"state":3025,"title":3080,"updated_at":3081,"url":3082,"score":3083},"### 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_",[3077,3078],{"name":3020,"color":3021},{"name":3037,"color":3038},4475,"Support inline `style` in `\u003CUTable>` via `meta.style`","2025-07-14T08:56:29Z","https://github.com/nuxt/ui/issues/4475",0.7123248,{"description":3085,"labels":3086,"number":3092,"owner":3023,"repository":3024,"state":3025,"title":3093,"updated_at":3094,"url":3095,"score":3096},"### Description\r\n\r\nThe code for specifying column width when there is no data is as follows and it is expected\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CUTable :empty-state=\"{ icon: 'i-heroicons-circle-stack-20-solid', label: 'No items.' }\" :rows=\"people\"\r\n :columns=\"columns\">\r\n \u003Ctemplate #from-data=\"{ row }\">\r\n {{ row.from.value }}\r\n \u003C/template>\r\n \u003C/UTable>\r\n \u003CUNotifications>\r\n \u003Ctemplate #title=\"{ title }\">\r\n \u003Cspan v-html=\"title\" />\r\n \u003C/template>\r\n\r\n \u003Ctemplate #description=\"{ description }\">\r\n \u003Cspan v-html=\"description\" />\r\n \u003C/template>\r\n \u003C/UNotifications>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst toast = useToast()\r\nconst app = useNuxtApp()\r\n\r\nconst columns = [{\r\n key: \"id\",\r\n label: \"编号\",\r\n class: 'w-16'\r\n}, {\r\n key: \"from\",\r\n label: \"发方\",\r\n class: 'w-[180px]'\r\n}, {\r\n key: \"to\",\r\n label: \"接方\",\r\n class: 'w-[180px]'\r\n\r\n}, {\r\n key: \"type\",\r\n label: \"类型\",\r\n class: 'w-[120px]'\r\n\r\n}, {\r\n key: \"value\",\r\n label: \"金额\",\r\n class: 'w-[120px]'\r\n\r\n}, {\r\n key: \"hash\",\r\n label: \"哈希\",\r\n}\r\n]\r\n\r\nconst people = ref([\r\n /*{\r\n \"id\": 1,\r\n \"from\": { value: '0x11111111fce9647bdf1e7877bf73ce8b0bad1111', class: 'w-[80px]' },\r\n \"to\": '0x22222222fce9647bdf1e7877bf73ce8b0bad2222',\r\n \"type\": 'ETH',\r\n \"value\": '123',\r\n \"hash\": '0x88baba17ca0060d644a72a9460260104eea81e7959445d3500d015ed71875d38',\r\n }*/\r\n])\r\n\r\n\r\n\u003C/script>\r\n\r\n\r\n\u003Cstyle>\r\na {\r\n color: #65a30d;\r\n font-weight: 700;\r\n font-size: 20px;\r\n}\r\n\r\n\r\n\u003C/style>\r\n```\r\n\r\n\r\n\r\nHowever, once there is data, it will be stretched open. How can I fix the header so that the content is partially hidden and drag the header to decide whether to hide or display it? This is too common in daily development and provides a good user experience\r\n\r\n\r\n```vue\r\nconst people = ref([\r\n {\r\n \"id\": 1,\r\n \"from\": { value: '0x11111111fce9647bdf1e7877bf73ce8b0bad1111', class: 'w-[80px]' },\r\n \"to\": '0x22222222fce9647bdf1e7877bf73ce8b0bad2222',\r\n \"type\": 'ETH',\r\n \"value\": '123',\r\n \"hash\": '0x88baba17ca0060d644a72a9460260104eea81e7959445d3500d015ed71875d38',\r\n }\r\n])\r\n```\r\n\r\n",[3087,3090,3091],{"name":3088,"color":3089},"question","d876e3",{"name":3043,"color":3044},{"name":3046,"color":3044},2092,"UTable column width","2025-06-18T09:06:18Z","https://github.com/nuxt/ui/issues/2092",0.7158159,{"description":3098,"labels":3099,"number":3101,"owner":3023,"repository":3024,"state":3025,"title":3102,"updated_at":3103,"url":3104,"score":3105},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nHow can add a class to the \"selectable\" column? Other columns I can use the `class` attribute (https://ui.nuxt.com/components/table#columns) for the column, but for the automatically showing \"selectable\" column, there's no such way to customize it\n\n### Additional context\n\n_No response_",[3100],{"name":3020,"color":3021},2377,"Ability to add custom column data (specifically class) to automatically showing selectable column","2024-11-12T17:12:38Z","https://github.com/nuxt/ui/issues/2377",0.71598023,{"labels":3107,"number":3114,"owner":3023,"repository":3023,"state":3025,"title":3115,"updated_at":3116,"url":3117,"score":3118},[3108,3111],{"name":3109,"color":3110},"pending triage","E99695",{"name":3112,"color":3113},"2.x","d4c5f9",7859,"Nuxt adding vuetify-theme-stylesheet on page with vuetifymodule.","2023-01-22T15:36:04Z","https://github.com/nuxt/nuxt/issues/7859",0.7168718,{"description":3120,"labels":3121,"number":3132,"owner":3023,"repository":3023,"state":3025,"title":3133,"updated_at":3134,"url":3135,"score":3136},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v20.10.0`\r\n- Nuxt Version: `3.11.0`\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/murisceman/nuxt-preloading-styles-issue\r\n\r\n### Describe the bug\r\n\r\nAfter updating to Nuxt `v3.11.0`, all styles imported from pages are automatically loaded throughout the app **(only in development mode)**.\r\n\r\nFor example, when importing a style into `pages/dashboard.vue`...\r\n\r\n```vue\r\n\u003Ctemplate>...\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport \"~/assets/dashboard.css\";\r\n\u003C/script>\r\n```\r\n\r\n...this style will be loaded for both `localhost:3000` and `localhost:3000/dashboard`.\r\n\r\n#### Prior versions\r\n\r\nNuxt `v3.10.x` loaded page-imported styles only when the page was visited. My [application](https://github.com/pruvious/pruvious), which dynamically re-registers dashboard routes, worked well in this scenario.\r\n\r\n### Additional context\r\n\r\nI have a stylesheet that is only applicable to the `/dashboard/**/*` routes, and it should not be loaded elsewhere. What methods can I use to achieve style isolation (in development mode) on a route level without using `scoped` styles? Thank you!\r\n\r\n### Logs\r\n\r\n_No response_",[3122,3125,3126,3129],{"name":3123,"color":3124},"dx","C39D69",{"name":3034,"color":3035},{"name":3127,"color":3128},"vite","3574D1",{"name":3130,"color":3131},"🔨 p3-minor","FBCA04",26312,"Nuxt `v3.11.0` is loading styles from all pages","2024-03-18T21:17:10Z","https://github.com/nuxt/nuxt/issues/26312",0.71800363,{"description":3138,"labels":3139,"number":3141,"owner":3023,"repository":3023,"state":3025,"title":3142,"updated_at":3143,"url":3144,"score":3145},"I am trying to create a faq page on nuxt js.\r\nThe template below which I got from veautify does not show up on my localhost. I get these errors instead. It works if I replace v-for \"(item,i) in 5\" : key=\"i\" as shown in the template source code but I want to pass a list of questions from object(listquestions)into the array from MapState.\r\n\r\n[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside \u003Cp>, or missing \u003Ctbody>. Bailing hydration and performing full client-side render.\r\nv-toolbar-logo> - did you register the component correctly? For recursive components, make sure to provide the \"name\" option.\r\n\r\nfound in\r\n\r\n---> \u003CDefault> at layouts/default.vue\r\n \u003CRoot>\r\n**faq.vue file**\r\n```\r\n\u003Ctemplate>\r\n \u003Cv-expansion-panel>\r\n \u003Cv-expansion-panel-content v-for=\"quest in listquestions\" :key=\"quest.id\">\r\n \u003Cdiv slot=\"header\"> Question \u003C/div>\r\n \u003Cv-card>\r\n \u003Cv-card-text class =\"grey lighten-3\">\r\n This is a test answer.\r\n \u003C/v-card-text>\r\n \u003C/v-card>\r\n \u003C/v-expansion-panel-content>\r\n \u003C/v-expansion-panel>\r\n\u003C/template>\r\n\r\n\u003Cstyle>\r\n\r\n\u003C/style>\r\n\u003Cscript>\r\n\r\nimport {mapState, mapGetters, mapActions} from 'vuex'\r\n\r\nexport default {\r\n computed: mapState({\r\n listquestions:'allQuestions'\r\n })\r\n}\r\n\u003C/script>`\r\n```\r\n```\r\n**questions.js file**\r\nexport const state = () => ({\r\n list :['Question 1','Question 2','Question 3','Question 4','Question 5'],\r\n allQuestions: state => state.list \r\n \r\n})\r\n``` \r\nAccordian template source code which I got from veautify.\r\n```\r\nhttps://vuetifyjs.com/components/expansion-panels#example-1\r\n```\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/c2383\">#c2383\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3140],{"name":3112,"color":3113},2743,"Accordian template on veutify not showing up because of v-for loop on nuxt js ","2023-01-18T16:02:37Z","https://github.com/nuxt/nuxt/issues/2743",0.71935624,["Reactive",3147],{},["Set"],["ShallowReactive",3150],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$femuFipNPYx9X_HiQCY5qG24JrQPw5LPUrcBcS-hqXfU":-1},"/nuxt/ui/2667"]