\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```",[2884,2887,2888],{"name":2885,"color":2886},"bug","d73a4a",{"name":2871,"color":2872},{"name":2889,"color":2890},"triage","ffffff",3607,"Background-Color for UTable","2025-03-18T15:08:25Z","https://github.com/nuxt/ui/issues/3607",0.6583443,{"description":2897,"labels":2898,"number":2903,"owner":2874,"repository":2875,"state":2876,"title":2904,"updated_at":2905,"url":2906,"score":2907},"### Description\n\nHi there,\r\n\r\nI installed the project from scratch with the below commands:\r\nFor Nuxt:\r\n`bun x nuxi@latest init test`\r\n\r\nFor Nuxt UI:\r\n`npx nuxi@latest module add ui`\r\n\r\nWhen I run the project with `bun run dev`, I got the below warning:\r\n\r\n\r\nMy `package.json` is as follows:\r\n```\r\n\"dependencies\": {\r\n \"@nuxt/eslint\": \"^0.5.7\",\r\n \"@nuxt/ui\": \"^2.18.6\",\r\n \"@nuxtjs/tailwindcss\": \"^6.12.1\",\r\n \"@pinia/nuxt\": \"^0.5.4\",\r\n \"@vueuse/core\": \"^11.1.0\",\r\n \"@vueuse/nuxt\": \"^11.1.0\",\r\n \"nuxt\": \"^3.13.2\",\r\n \"vue\": \"latest\",\r\n \"vue-router\": \"latest\"\r\n },\r\n \"devDependencies\": {\r\n \"@nuxt/devtools\": \"^1.5.1\",\r\n \"ts-node\": \"^10.9.2\",\r\n \"typescript\": \"^5.6.2\",\r\n \"vue-tsc\": \"^2.1.6\"\r\n }\r\n```\r\n \r\n And my config is:\r\n```\r\nmodules: [\r\n '@nuxt/eslint',\r\n '@nuxtjs/tailwindcss',\r\n '@nuxt/ui',\r\n '@pinia/nuxt',\r\n '@vueuse/nuxt'\r\n ],\r\n vite: {\r\n server: {\r\n hmr: {\r\n clientPort: 3000\r\n }\r\n }\r\n },\r\n ui: {\r\n global: true\r\n }\r\n```\r\n\r\nI'm wondering why...\r\n1. I got the Nuxt 3.8.2 warning\r\n2. There's no auto-completion for Nuxt UI component (I installed Vue - Official extension)\r\n3. Using Nuxt UI components gives error\r\n\r\n\r\n\r\n\r\n",[2899,2900],{"name":2868,"color":2869},{"name":2901,"color":2902},"stale","ededed",2249,"Module @nuxt/ui is disabled due to incompatibility issues","2024-11-27T02:06:55Z","https://github.com/nuxt/ui/issues/2249",0.66198725,{"description":2909,"labels":2910,"number":2913,"owner":2874,"repository":2875,"state":2876,"title":2914,"updated_at":2915,"url":2916,"score":2917},"### 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```",[2911,2912],{"name":2868,"color":2869},{"name":2871,"color":2872},3285,"Trailing slashes","2025-02-10T13:25:12Z","https://github.com/nuxt/ui/issues/3285",0.6710494,{"description":2919,"labels":2920,"number":2926,"owner":2874,"repository":2875,"state":2876,"title":2927,"updated_at":2928,"url":2929,"score":2930},"### 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```",[2921,2922,2925],{"name":2885,"color":2886},{"name":2923,"color":2924},"pro","5BD3CB",{"name":2889,"color":2890},3300,"Nuxt UI pro licensing failing randomly on Heroku","2025-02-19T16:07:14Z","https://github.com/nuxt/ui/issues/3300",0.68577784,{"description":2932,"labels":2933,"number":2934,"owner":2874,"repository":2935,"state":2936,"title":2937,"updated_at":2938,"url":2939,"score":2940},"If you go to any blog and click `Edit on Github` on aside it will bring you to a 404 on github.\r\n\r\nCode that is incorrect: https://github.com/nuxt/nuxt.com/blob/a9b1e32c93714f23703f12add0f0c17cc518bd2a/pages/blog/%5Bslug%5D.vue#L66\r\n\r\nNeeds to be: \r\n\r\n```\r\nhttps://github.com/nuxt/nuxt.com/edit/main/content/${article.value._file}\r\n```",[],1533,"nuxt.com","closed","blog \"Edit on Github\" url is broke.","2024-03-11T22:23:34Z","https://github.com/nuxt/nuxt.com/issues/1533",0.6335225,{"description":2942,"labels":2943,"number":2946,"owner":2874,"repository":2875,"state":2936,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.11.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: -\n- Package Manager: pnpm@9.14.2\n- Builder: -\n- User Config: default\n- Runtime Modules: ../src/module, @nuxt/ui@3.0.0-alpha.9\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n^3.0.0-alpha.9\n\n### Reproduction\n\nNormal Nuxt app setup as mentioned here https://ui3.nuxt.dev/getting-started/installation/nuxt\n- Use latest Nuxt app. \n- Add @tailwindcss 4 with vite and install this @nuxt/ui module and add it to Nuxt app. \n- Add @nuxt/ui import to tailwind css file\n\n### Description\n\n- Components such as UButton displays nicely\n- Components such as Accordion or Drawer fails. \n\nHere's a sample code used in `pages/index.vue` file\n\n```html\n\u003CUButton :ui=\"{ base: 'bg-primary-500' }\" class=\"inline-block\">UButton\u003C/UButton>\n\n \u003CUButton label=\"Show toast\" color=\"secondary\" variant=\"solid\" @click=\"showToast\" />\n\n \u003C!-- \u003CUAccordion :items=\"items\" /> -->\n\n \u003CUDrawer id=\"drawer\">\n \u003CUButton label=\"Open\" color=\"surface\" variant=\"solid\" />\n \u003Ctemplate #content>\n \u003CBaseUiPlaceholder class=\"h-48 m-4\" />\n \u003C/template>\n \u003C/UDrawer>\n```\n\nIf we use Accordion or Drawer (as mentioned in above code), we get 500 Error and app crashes. \n\n\n\nIf we comment out the Accordion and Drawer, no error comes, and app works nicely. \n\n\n\nSee: No error if we don't use the error-causing components. \n\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2944,2945],{"name":2885,"color":2886},{"name":2871,"color":2872},2769,"[v3] Error `$setup.useId is not a function` in Accordion, Drawer, etc.","2024-11-26T13:44:15Z","https://github.com/nuxt/ui/issues/2769",0.6488576,{"description":2952,"labels":2953,"number":2959,"owner":2874,"repository":2875,"state":2936,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.18.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.12.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/image@1.8.1, @nuxt/content@2.13.4, @nuxthq/studio@1.1.2, @nuxt/ui-pro@3.0.0-alpha.10, @nuxtjs/plausible@1.2.0, @nuxtjs/seo@2.0.2, @vueuse/nuxt@12.0.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0.alpha10\n\n### Reproduction\n\nhttps://ui3.nuxt.dev/components/button#loading (example with `loading-auto`)\n\n### Description\n\nWhen using a `UIButton` component with an `@click` event, the cursor does not change to `cursor-pointer`, which may confuse users about the button's clickability.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2954,2955,2958],{"name":2885,"color":2886},{"name":2956,"color":2957},"duplicate","cfd3d7",{"name":2871,"color":2872},2940,"`cursor-pointer` is missing on `UButton` with an `@click` event","2025-04-02T09:37:12Z","https://github.com/nuxt/ui/issues/2940",0.65618473,{"description":2965,"labels":2966,"number":2968,"owner":2874,"repository":2875,"state":2936,"title":2969,"updated_at":2970,"url":2971,"score":2972},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.13.1\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@9.9.0\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Version\r\n\r\nv2.8.0\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-ui-u8opw1?file=app.vue\r\n\r\n### Description\r\n\r\nOverflow problem, the select menu is open inside the table\r\n\r\n### Additional context\r\n\r\n\r\n\r\n\r\n### Logs\r\n\r\n_No response_",[2967],{"name":2885,"color":2886},2255,"Overflow probem with SelectMenu inside a table","2024-09-26T10:21:43Z","https://github.com/nuxt/ui/issues/2255",0.66534853,{"description":2974,"labels":2975,"number":2978,"owner":2874,"repository":2875,"state":2936,"title":2979,"updated_at":2980,"url":2981,"score":2982},"### 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' 속성에서 가져옵니다.`",[2976,2977],{"name":2868,"color":2869},{"name":2871,"color":2872},3900,"How to set v-model type of UCalendar","2025-04-25T06:07:41Z","https://github.com/nuxt/ui/issues/3900",0.6671419,["Reactive",2984],{},["Set"],["ShallowReactive",2987],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fn1gpBKUvDiRmvGQs7qQY7PypTru1K5q3xq2anNU_T9I":-1},"/nuxt/ui/2392"]