\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",[3019,3022],{"name":3020,"color":3021},"question","d876e3",{"name":3023,"color":3024},"v3","49DCB8",4563,"nuxt","ui","open","`useVirtualList` example for `UTable`","2025-07-21T11:23:04Z","https://github.com/nuxt/ui/issues/4563",0.6578427,{"description":3034,"labels":3035,"number":3043,"owner":3026,"repository":3027,"state":3028,"title":3044,"updated_at":3045,"url":3046,"score":3047},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.13.1\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.8\n- Package Manager: yarn@4.8.1\n- Builder: -\n- User Config: compatibilityDate, imports, components, devtools, modules, css, fonts, ui\n- Runtime Modules: @nuxt/eslint@1.2.0, @nuxt/fonts@0.11.0, @nuxt/image@1.10.0, @nuxt/test-utils@3.17.2, @nuxt/ui@3.0.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.2\n\n### Reproduction\n\nhttps://github.com/nuxt/ui/blob/v3/src/theme/button.ts\n\n### Description\n\nI want to customize a button variant by `size`, `trailing` and `square` params. It works, but the types are broken.\n\nThe line in the `compoundVariants`:\n`{ size: 'md', trailing: true, square: false, class: { trailingIcon: '-mr-1' } }`\n\nErrors:\n`Type '{ trailingIcon: string; }' is not assignable to type 'string'`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3036,3039,3040],{"name":3037,"color":3038},"bug","d73a4a",{"name":3023,"color":3024},{"name":3041,"color":3042},"triage","ffffff",3738,"Incorrect compound button variants types","2025-03-30T14:32:49Z","https://github.com/nuxt/ui/issues/3738",0.75385183,{"description":3049,"labels":3050,"number":3051,"owner":3026,"repository":3026,"state":3028,"title":3052,"updated_at":3053,"url":3054,"score":3055},"Hi, I apologize in advance for creating an issue. I had previously started a [discussion](https://github.com/nuxt/nuxt/discussions/32458) and also left a comment on a [related issue](https://github.com/nuxt/nuxt/issues/22506#issuecomment-3018903439), but unfortunately haven't received an answer to my question. That’s why I decided to open this issue.\n\nAll the details are already in the [discussion](https://github.com/nuxt/nuxt/discussions/32458), but I’ll copy them here as well.\n\n## Copy from the [discussion](https://github.com/nuxt/nuxt/discussions/32458)\n\nHi everyone, i need to inject a custom script like `\u003Cscript>window.__CONFIG__ = ${config}\u003C/script>` into the `\u003Chead>` during server-side rendering.\n\nI tried doing this using a [Nuxt plugin](https://nuxt.com/docs/guide/directory-structure/plugins) with [useHead](https://nuxt.com/docs/api/composables/use-head). Here's a simplified version of the code\n\n```ts\nimport { defineNuxtPlugin, useHead } from '#app'\n\nexport default defineNuxtPlugin({\n name: 'html-config',\n setup() {\n const config = JSON.stringify({ k: 'v' }) // Generated dynamically\n\n useHead({\n script: [{\n innerHTML: `window.__CONFIG__ = ${config}`,\n tagPriority: 'critical',\n }],\n })\n },\n})\n```\n\nHowever, this doesn't work when the following setting is applied in `nuxt.config.ts`\n\n```ts\nimport { defineNuxtConfig } from 'nuxt/config'\n\nexport default defineNuxtConfig({\n nitro: {\n routeRules: {\n '/': {\n ssr: false,\n },\n },\n },\n})\n```\n\nI found a [related issue](https://github.com/nuxt/nuxt/issues/22506), which explains that `useHead` does not work when `ssr: false`. In such cases, it's recommended to inject scripts via [`app.head.script`](https://nuxt.com/docs/api/nuxt-config#head) in `nuxt.config.ts`. Unfortunately, this approach doesn’t work for me, since the config is generated dynamically.\n\nAs a workaround, I tried using a Nitro plugin like this\n\n```ts\nimport { defineNitroPlugin } from 'nitropack/runtime'\n\nexport default defineNitroPlugin((nitro) => {\n nitro.hooks.hook('render:html', ({ head }) => {\n const config = JSON.stringify({ k: 'v' }) // Generated dynamically\n\n head.unshift(`\u003Cscript>window.__CONFIG__ = ${config}\u003C/script>`)\n })\n})\n```\n\nThis works, but I’m not entirely satisfied with this approach. I’d really prefer to use [unhead](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/overview) with `tagPriority: 'critical'`.\n\nAnother idea I had was to include a placeholder in the head during build time and replace it later with a [Nitro plugin](https://nitro.build/guide/plugins). But I don’t really like this approach either. At the very least because [`resp.body` is typed as `any`](https://github.com/nitrojs/nitro/blob/v2/src/types/runtime/nitro.ts#L27), which can lead to errors.\n\n\n```ts\n// nuxt.config.ts\nimport { defineNuxtConfig } from 'nuxt/config'\n\nexport default defineNuxtConfig({\n app: {\n head: {\n script: [{\n innerHTML: 'window.__CONFIG__ = **PLACEHOLDER**',\n tagPriority: 'critical',\n }],\n },\n },\n})\n\n// nitro plugin\nimport { defineNitroPlugin } from 'nitropack/runtime'\n\nexport default defineNitroPlugin((nitro) => {\n nitro.hooks.hook('render:response', (resp) => {\n const config = JSON.stringify({ k: 'v' }) // Generated dynamically\n\n resp.body = resp.body.replace('**PLACEHOLDER**', config)\n })\n})\n```\n\nDoes anyone have a better solution for injecting dynamic scripts into the head during SSR, ideally still using `unhead`?",[],32809,"Using useHead with the ssr: false setting enabled","2025-07-29T15:22:57Z","https://github.com/nuxt/nuxt/issues/32809",0.75436515,{"description":3057,"labels":3058,"number":3062,"owner":3026,"repository":3063,"state":3064,"title":3065,"updated_at":3066,"url":3067,"score":3068},"",[3059],{"name":3060,"color":3061},"design","00bd6f",1209,"nuxt.com","closed","[Workshop] Workshop single page ","2023-10-10T14:45:09Z","https://github.com/nuxt/nuxt.com/issues/1209",0.62634,{"description":3070,"labels":3071,"number":3062,"owner":3026,"repository":3027,"state":3064,"title":3078,"updated_at":3079,"url":3080,"score":3068},"### Description\n\nAllow sorting by multiple columns by holding a modifier modifier key and clicking multiple columns.\r\n\r\nAs an example:\r\nhttps://primevue.org/datatable/#multiple_sort\n\n### Additional context\n\n_No response_",[3072,3075,3077],{"name":3073,"color":3074},"enhancement","a2eeef",{"name":3076,"color":3042},"wontfix-v2",{"name":3023,"color":3024},"`UTable` sort by multiple columns","2025-03-24T14:57:22Z","https://github.com/nuxt/ui/issues/1209",{"description":3082,"labels":3083,"number":3085,"owner":3026,"repository":3027,"state":3064,"title":3086,"updated_at":3087,"url":3088,"score":3089},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.13.2\r\n- CLI Version: 3.14.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@8.15.6\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Version\n\nv2.18.6\n\n### Reproduction\n\nhttps://stackblitz.com/~/github.com/Yves852/nuxt-ui-commandpalette-hover\n\n### Description\n\nSelecting an element on click is visually inconsistent. Visually all elements are selected, independantly of `v-model=\"selected\"`.\r\n\r\nWith props `multiple` visually will select all or unselect all, independantly of `v-model=\"selected\"`.\r\n\r\nOn keyboard, using \"enter\" to select update selected correctly but component jump to first element. Same visual problems as mouse.\r\n\r\nThe prop `nullable` doesn't seem to influence the bug.\r\n\r\nRelated to https://github.com/nuxt/ui/issues/2284\r\nCould be related to [1708](https://github.com/nuxt/ui/issues/1708)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3084],{"name":3037,"color":3038},2285,"CommandPalette: visual item selection inconsistent","2024-11-19T15:26:05Z","https://github.com/nuxt/ui/issues/2285",0.69308853,{"description":3091,"labels":3092,"number":3095,"owner":3026,"repository":3027,"state":3064,"title":3096,"updated_at":3097,"url":3098,"score":3099},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.1\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: bun@1.1.33\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\nv3.0.0-alpha.7\n\n### Reproduction\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n neutral: \"zinc\",\n primary: \"rose\",\n },\n button: {\n compoundVariants: [\n {\n color: \"neutral\",\n variant: \"outline\",\n class:\n \"ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]\",\n },\n ],\n },\n },\n});\n```\n\n```\nType '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type 'DeepPartial\u003C({ color: \"primary\"; variant: \"solid\"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: \"secondary\"; variant: \"solid\"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.\n Type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap\u003Cstring>; }'.\n Index signature for type 'string' is missing in type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]'.ts(2322)\n```\n\n### Description\n\nHi :) I am getting type errors when using `compoundVariant`. \n\nFor example, here is my `app.config.ts`:\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n neutral: \"zinc\",\n primary: \"rose\",\n },\n button: {\n compoundVariants: [\n {\n color: \"neutral\",\n variant: \"outline\",\n class:\n \"ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]\",\n },\n ],\n },\n },\n});\n```\n\nI am getting the following type error for `compoundVariants`:\n```\nType '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type 'DeepPartial\u003C({ color: \"primary\"; variant: \"solid\"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: \"secondary\"; variant: \"solid\"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.\n Type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap\u003Cstring>; }'.\n Index signature for type 'string' is missing in type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]'.ts(2322)\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3093,3094],{"name":3037,"color":3038},{"name":3023,"color":3024},2481,"Type error on `compoundVariants`","2024-10-28T21:43:49Z","https://github.com/nuxt/ui/issues/2481",0.72042936,{"description":3101,"labels":3102,"number":3106,"owner":3026,"repository":3027,"state":3064,"title":3107,"updated_at":3108,"url":3109,"score":3110},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.9.0`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.22.5`\n- Nitro Version: `2.11.6`\n- Package Manager: `npm@10.8.3`\n- Builder: `-`\n- User Config: `devtools`, `modules`, `i18n`, `ssr`, `runtimeConfig`, `app`, `css`, `vite`, `compatibilityDate`\n- Runtime Modules: `@nuxtjs/i18n@9.3.1`, `@nuxt/ui@3.0.0`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-beta.4\n\n### Reproduction\n\nUse any RTL language with USelect and UInputMenu component.\n\n### Description\n\nCurrently, both USelect and UInput Menu don't support rtl direction. The placeholder should be on the right side and the icon on the left side of the field.\n\nIn USelect, you can see that even the dropdown is not properly aligned according to language. \n\n\u003Cimg width=\"325\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/cbdc836c-b95f-465e-9ca0-58648ff768b1\" />\n\nWhile the popover label are aligned properly for UInputMenu, the placeholder and arrow is still not in proper direction.\n\u003Cimg width=\"221\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e65e9225-b614-40b0-98a5-25b7204f5dc3\" />\n\nSame with these tags components, it's direction should be reversed too. \n\u003Cimg width=\"442\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/0198503a-bd34-4b4e-8a11-1213023f9383\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3103,3104,3105],{"name":3037,"color":3038},{"name":3023,"color":3024},{"name":3041,"color":3042},3538,"USelect and UInputMenu don't support RTL language.","2025-03-20T14:01:01Z","https://github.com/nuxt/ui/issues/3538",0.723236,{"description":3112,"labels":3113,"number":3118,"owner":3026,"repository":3027,"state":3064,"title":3119,"updated_at":3120,"url":3121,"score":3122},"### Description\n\nIt would be great if the Nuxt UI carousel component could support infinite scrolling, allowing users to continuously scroll through items without reaching an end. This feature is commonly seen in many modern carousels and would enhance the user experience, especially for carousels with a limited number of items or those designed for continuous looping.\n\n### Additional context\n\n_No response_",[3114,3117],{"name":3115,"color":3116},"duplicate","cfd3d7",{"name":3073,"color":3074},2286,"Add Infinite Scrolling to Nuxt UI Carousel Component","2024-10-02T09:14:42Z","https://github.com/nuxt/ui/issues/2286",0.72743875,{"description":3124,"labels":3125,"number":3133,"owner":3026,"repository":3027,"state":3064,"title":3134,"updated_at":3135,"url":3136,"score":3137},"### Environment\n\nBuild error on vercel.app and on local windows 10, both on build and dev.\n\n### Version\n\nv1.4.4 @nuxt/ui-pro - Saas Template\n\n### Reproduction\n\nInstall a clean saas template.\nEnable typescript check in nuxt.config\n\nTry to deploy it on vercel.\n\nAnd try to copy/paste the url in a facebook post.\n\nHere is a 100% clean saas template, without typeCheck enabled:\nhttps://stackblitz.com/~/github.com/LutherApp/codespace-project\n\n(This is a copy of my [github repo](https://github.com/LutherApp/codespace-project))\n\n### Description\n\nOn build there will be \n## errors on the \"title\"-variable\nError-msg:\nObject literal may only specify known properties, and 'title' does not exist in type 'OgImageOptions\u003C\"NuxtSeo\"> | OgImagePrebuilt'. (etc.)\n\n## \"authors\"- and \"title\"-variable in blog/index\n3 x Type 'bla bla bla' is not assignable to type 'bla bla bla'.\n1 x Property 'avatar' is optional in type 'bla bla bla' but required in type 'bla bla bla'.\n\n## Fix\nI was adding this workaround for typecheck in three or four files:\n```\n// @ts-expect-error Object literal may only specify known properties, and 'title' does not exist in type 'OgImageOptions\u003C\"NuxtSeo\"> | OgImagePrebuilt'.\n```\n\nIn blog/index.vue a was adding this lines in the template in front of `UPageBody` (in blog/index.vue):\n``` \n\u003C!--\n @vue-expect-error The variable authors throws four errors;\n 3 x Type 'bla bla bla' is not assignable to type 'bla bla bla'.\n 1 x Property 'avatar' is optional in type 'bla bla bla' but required in type 'bla bla bla'.\n -->\n```\n\n## seo info from the page missing on facebook\nThere is still noe data about the page on facebook. \n(Other nuxt-content I have made earlier have this info when I copy/paste the url to facebook.)\n\n## Any questions to this issue?\nPlease add some questions to get more info about this issues. (This was written faster than normal.)",[3126,3127,3130],{"name":3037,"color":3038},{"name":3128,"color":3129},"pro","5BD3CB",{"name":3131,"color":3132},"upstream","78bddb",2415,"og:fields in my 100% clean saas template doesn't shows on facebook, and your own public saas template don't show the og:image","2024-10-22T09:40:37Z","https://github.com/nuxt/ui/issues/2415",0.7428995,["Reactive",3139],{},["Set"],["ShallowReactive",3142],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f0ge_0SLSFUKeHQ2wIYGW3SJfqdf35AHkAbTqhviNRLI":-1},"/nuxt/ui/2437"]