\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```",[1984,1987,1990],{"name":1985,"color":1986},"bug","d73a4a",{"name":1988,"color":1989},"v3","49DCB8",{"name":1991,"color":1992},"triage","ffffff",3607,"nuxt","ui","open","Background-Color for UTable","2025-03-18T15:08:25Z","https://github.com/nuxt/ui/issues/3607",0.6276583,{"description":2002,"labels":2003,"number":2007,"owner":1994,"repository":1994,"state":1996,"title":2008,"updated_at":2009,"url":2010,"score":2011},"**Summary (generated)**:\r\n\r\nHere is a brief summary in English:\r\n\r\nThe bug is that TypeScript is giving an error on the `transform` function in the `useFetch` setup in a Vue application. Despite searching documentation, bugs, and discussions, the closest relevant issue found was #26138.\r\n\r\n\u003Chr>\r\n\r\n### Environment\r\n\r\nStackBlitz/Codespaces\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-f3fvvc?file=app.vue\r\n\r\n```typescript\r\n\u003Cscript setup lang=\"ts\">\r\ninterface Page {\r\n title: string;\r\n}\r\n\r\nconst { data } = await useFetch\u003CPage[]>(`/api/pages`, {\r\n transform: (data) => data[0],\r\n});\r\n\u003C/script>\r\n\r\n```\r\n\r\nNotice the typescript error on `transform`\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nTypeScript isn't liking the type on transform with useFetch.\r\n\r\nI [searched](https://github.com/search?q=repo%3Anuxt%2Fnuxt+usefetch+transform&type=issues) docs, bugs and discusssions and the closest find was: https://github.com/nuxt/nuxt/issues/26138\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2004],{"name":2005,"color":2006},"pending triage","E99695",27762,"\"UseFetchType\" and also transforms the result into the desired output format using another transformer.","2024-06-30T11:03:32Z","https://github.com/nuxt/nuxt/issues/27762",0.633041,{"description":2013,"labels":2014,"number":2020,"owner":1994,"repository":1995,"state":1996,"title":2021,"updated_at":2022,"url":2023,"score":2024},"### Description\n\nI’ve been trying to display an avatar with a chip inside a `UCommandPalette` item (and `UButton`, …), but it looks like this use case isn't currently supported. \n\n### Additional context\n\n_No response_",[2015,2018,2019],{"name":2016,"color":2017},"enhancement","a2eeef",{"name":1988,"color":1989},{"name":1991,"color":1992},3827,"[UCommandPalette] Support for avatars with chips in `UCommandPalette` items (and `UButton`, …)","2025-04-08T12:03:29Z","https://github.com/nuxt/ui/issues/3827",0.64081484,{"description":2026,"labels":2027,"number":2032,"owner":1994,"repository":1995,"state":1996,"title":2033,"updated_at":2034,"url":2035,"score":2036},"### Description\n\nHi there,\n\nI'm really curious about how Nuxt UI is handling trailing slashes. In the Nuxt Content repo I can see they are using `ufo` to remove the trailing slashes, but in the Nuxt UI repo I can't find how you get rid of it. Even tho I know you can do these things on Vercel and Netlify, I'm curious how you handle it in Nuxt UI.\n\nIn my case, route.path is returning a path with a trailing slash and breaks my `queryCollection`...\n\n```vue\nconst { data: page } = await useAsyncData(\n `${route.path}/.navigation`,\n async () => {\n return await queryCollection('content').path(route.path).first();\n }\n);\n```",[2028,2031],{"name":2029,"color":2030},"question","d876e3",{"name":1988,"color":1989},3285,"Trailing slashes","2025-02-10T13:25:12Z","https://github.com/nuxt/ui/issues/3285",0.64256936,{"description":2038,"labels":2039,"number":2042,"owner":1994,"repository":1995,"state":1996,"title":2043,"updated_at":2044,"url":2045,"score":2046},"### Description\n\n\nHow to set v-model type of UCalendar\n`\n \u003CUCalendar\n v-model=\"datePickerValue\"\n range\n size=\"lg\"\n color=\"error\"\n weekday-format=\"short\"\n >\n \u003Ctemplate #heading=\"{ value }\">\n \u003Cdiv class=\"custom-heading\">\n \u003Ch2 class=\"text-sm font-medium text-[#3f3f3f] leading-tight\">\n {{ formatMonthYear(value) }}\n \u003C/h2>\n \u003C/div>\n \u003C/template>\n\n \u003C!-- Day 커스터마이즈 -->\n \u003Ctemplate #day=\"{ day }\">\n \u003Cdiv class=\"custom-day\">\n \u003Cspan\n :class=\"{\n 'text-sm font-semibold': isDaySelected(day),\n 'text-sm font-normal': !isDaySelected(day),\n }\"\n >{{ extractDay(day) }}\u003C/span\n >\n \u003C/div>\n \u003C/template>\n\n \u003Ctemplate #week-day=\"{ day }\">\n \u003Cdiv class=\"custom-week-day bg-white border-none\">\n \u003Cspan class=\"font-medium text-xs text-[#7e7e7e]\">{{ day }}\u003C/span>\n \u003C!-- 예시: 요일을 간단하게 출력 -->\n \u003C/div>\n \u003C/template>\n \u003C/UCalendar>\n`\n\n`const datePickerValue = ref\u003C{ start: DateValue; end: DateValue }>({\n start: new CalendarDate(\n new Date().getFullYear(),\n new Date().getMonth() + 1,\n new Date().getDate()\n ) as DateValue,\n end: new CalendarDate(\n new Date().getFullYear(),\n new Date().getMonth() + 1,\n new Date().getDate()\n ) as DateValue,\n});`\n\nI put the above variable in v-model, but I get the following error. How should I declare the type?\n\n`'{ start: { readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCale...' 형식은 'DateRange' 형식에 할당할 수 없습니다.\n 'start' 속성의 형식이 호환되지 않습니다.\n '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식은 'DateValue | undefined' 형식에 할당할 수 없습니다.\n '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식은 'DateValue | undefined' 형식에 할당할 수 없습니다.\n '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식에 'ZonedDateTime' 형식의 #private, hour, minute, second 외 4개 속성이 없습니다.ts-plugin(2322)\nCalendar.vue(99, 3): 필요한 형식은 여기에서 '{ readonly \"onUpdate:modelValue\"?: ((date: DateRange | null) => any) | undefined; readonly \"onUpdate:placeholder\"?: ((...args: unknown[]) => any) | undefined; readonly \"onUpdate:startValue\"?: ((date: DateValue | undefined) => any) | undefined; ... 36 more ...; prevPage?: ((placeholder: DateValue) => DateValue) | und...' 형식에 선언된 'modelValue' 속성에서 가져옵니다.`",[2040,2041],{"name":2029,"color":2030},{"name":1988,"color":1989},3900,"How to set v-model type of UCalendar","2025-04-15T02:00:18Z","https://github.com/nuxt/ui/issues/3900",0.64401585,{"description":2048,"labels":2049,"number":2053,"owner":1994,"repository":1995,"state":1996,"title":2054,"updated_at":2055,"url":2056,"score":2057},"### Description\n\nWould be nice to add the possibility to set the position of the loading icon in the `UButton`. Now it replaces the leading icon, but when the trailing icon is used this leads to a behavior that in my opinion is undesidered in the majority of cases. \nThe idea would be a prop like that:\n```ts\nloading-position: 'leading' | 'trailing' | 'auto'\n```\nwhere `auto` should place the loader where the button icon is placed, leading otherwise.\n\n### Additional context\n\n_No response_",[2050,2051,2052],{"name":2016,"color":2017},{"name":1988,"color":1989},{"name":1991,"color":1992},3419,"Add `loading-position` to `UButton`","2025-03-02T12:16:32Z","https://github.com/nuxt/ui/issues/3419",0.6446084,{"description":2059,"labels":2060,"number":2063,"owner":1994,"repository":1995,"state":1996,"title":2064,"updated_at":2065,"url":2066,"score":2067},"### Description\n\nHi, I'm having a hard time applying transition to dark / light background.\n\nMy `main.css` file is as follows.\n\nChanging the background color from `slate` to `stone`, for example, works fine.\n\nThe problem is just for the light / dark theme transition.\n\n```\n:root {\n --ui-bg: var(--ui-color-neutral-100);\n}\n\n.dark {\n --ui-bg: var(--ui-color-neutral-900);\n}\n\n@layer base {\n body {\n @apply transition-colors duration-1000;\n }\n}\n```\n\nHere is the function that changes the theme:\n\n```\nconst isDark = computed({\n get() {\n return colorMode.value === 'dark';\n },\n set() {\n colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';\n },\n});\n```\n\nAny help would be appreciated, thanks!\n",[2061,2062],{"name":2029,"color":2030},{"name":1988,"color":1989},3645,"Applying transition-colors to light / dark theme","2025-03-21T16:20:57Z","https://github.com/nuxt/ui/issues/3645",0.6460876,{"description":2069,"labels":2070,"number":2076,"owner":1994,"repository":1995,"state":1996,"title":2077,"updated_at":2078,"url":2079,"score":2080},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.11.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.13.2\n- Nitro Version: 2.9.7\n- Package Manager: yarn@1.22.19\n- Builder: -\n- User Config: devtools, extends, modules, ssr, vite, runtimeConfig, ui, css, i18n, algolia, image, nitro, compatibilityDate\n- Runtime Modules: @nuxtjs/algolia@1.10.2, @nuxtjs/i18n@8.3.1, @pinia/nuxt@0.5.1, @nuxt/ui, @nuxt/image@1.7.0\n- Build Modules: -\n\n\n\n### Version\n\nNuxt UI pro 1.4.2\n\n### Reproduction\n\n-\n\n### Description\n\nOn Heroku, I randomly (~10%) get an error while building my project, indicating that NUXT_UI_PRO_LICENSE is not present.\nIt fix it but juste re-laucnhing the build a few seconds later\n\n```\n $ nuxt generate\n Nuxt 3.13.2 with Nitro 2.9.7\n ℹ Using Nitro server preset: static\n [nuxt:tailwindcss] ℹ Using default Tailwind CSS file\n ℹ Nuxt Icon server bundle mode is set to local\n ERROR Invalid NUXT_UI_PRO_LICENSE license key.\nPurchase Nuxt UI Pro at https://ui.nuxt.com/pro/pricing to build your app in production.\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2071,2072,2075],{"name":1985,"color":1986},{"name":2073,"color":2074},"pro","5BD3CB",{"name":1991,"color":1992},3300,"Nuxt UI pro licensing failing randomly on Heroku","2025-02-19T16:07:14Z","https://github.com/nuxt/ui/issues/3300",0.6516559,{"description":2082,"labels":2083,"number":2084,"owner":1994,"repository":2085,"state":2086,"title":2087,"updated_at":2088,"url":2089,"score":2090},"On the 'Enterprise Jobs' page, location badges were closely together on mobile screens. I removed the `mr-3` class from the badge element and placed the badges inside a parent `\u003Cdiv>` with the classes` flex`, `flex-wrap`, and `gap-3` Now it won't stick together and will look good on mobile devices.\r\n\r\n| **BEFORE** | **AFTER** | \r\n|-------- | ------ | \r\n|  |  |\r\n\r\n\r\n\r\n\n```[tasklist]\n### Tasks\n```\n",[],1403,"nuxt.com","closed","Spacing issue with Location badges on 'Enterprise Jobs' page for mobile screens","2024-09-19T19:38:43Z","https://github.com/nuxt/nuxt.com/issues/1403",0.62068427,{"description":2092,"labels":2093,"number":2096,"owner":1994,"repository":1995,"state":2086,"title":2097,"updated_at":2098,"url":2099,"score":2100},"### Environment\n\nNuxt 3.15.4\nNuxt UI https://pkg.pr.new/@nuxt/ui@e7e7585\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.15.4\n\n### Reproduction\n\n-\n\n### Description\n\nJust noticed the following components work as expected in a fieldForm\n\n```\n \u003CUFormField\n v-if=\"isVisible\"\n :name=\"fieldName\"\n :label=\"field['#title']\"\n :required=\"!!field['#required']\"\n >\n \u003Ctemplate\n v-if=\"descriptionContent && field['#type'] !== 'checkbox'\"\n #description\n >\n \u003Cspan v-html=\"cleanHTML(descriptionContent)\" />\n \u003C/template>\n\n \u003Ccomponent\n v-if=\"resolvedComponent\"\n :is=\"resolvedComponent\"\n :field=\"field\"\n :fieldName=\"fieldName\"\n :state=\"state\"\n />\n\n \u003Ctemplate v-if=\"helpContent\" #help>\n \u003Cspan v-html=\"cleanHTML(helpContent)\" />\n \u003C/template>\n \u003C/UFormField>\n```\n\n ```\n \u003CURadioGroup\n v-model=\"state[fieldName]\"\n :items=\"transformOptions(field['#options'] || {})\"\n orientation=\"horizontal\"\n class=\"w-full\"\n />\n```\n\n```\n \u003CUSelect\n v-model=\"state[fieldName]\"\n placeholder=\"Select\"\n :items=\"transformOptions(field['#options'] || {})\"\n class=\"w-full\"\n />\n\n```\nHowever when using a UCheckbox label and description have to be set here\n\n```\n \u003CUCheckbox\n v-model=\"checkboxValue\"\n :label=\"field['#title']\"\n :description=\"field['#description']\"\n class=\"w-full\"\n @update:model-value=\"props.state[fieldName] = $event\"\n />\n```\n\nSeems like this is a bug or maybe this is by design?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2094,2095],{"name":2029,"color":2030},{"name":1988,"color":1989},3294,"UCheckbox fieldform support","2025-02-12T19:23:36Z","https://github.com/nuxt/ui/issues/3294",0.62443477,["Reactive",2102],{},["Set"],["ShallowReactive",2105],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"Zt4XPwDEvFjDLQzOuOtZ-BNjU_IHSrUSL-GENbwU4b8":-1},"/nuxt/ui/3250"]