\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```",[2887,2888,2891],{"name":2868,"color":2869},{"name":2889,"color":2890},"v3","49DCB8",{"name":2874,"color":2875},3607,"Background-Color for UTable","2025-03-18T15:08:25Z","https://github.com/nuxt/ui/issues/3607",0.61045897,{"description":2898,"labels":2899,"number":2904,"owner":2877,"repository":2878,"state":2879,"title":2905,"updated_at":2906,"url":2907,"score":2908},"### 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",[2900,2903],{"name":2901,"color":2902},"question","d876e3",{"name":2889,"color":2890},3645,"Applying transition-colors to light / dark theme","2025-03-21T16:20:57Z","https://github.com/nuxt/ui/issues/3645",0.6485143,{"description":2910,"labels":2911,"number":2924,"owner":2877,"repository":2877,"state":2879,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v18.18.1\r\n- Nuxt Version: 3.8.1\r\n- CLI Version: 3.9.1\r\n- Nitro Version: 2.7.2\r\n- Package Manager: npm@9.8.1\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nMinimal reproduction:\r\nhttps://stackblitz.com/edit/github-d87l76?file=components%2FPage.vue\r\n#### **`Page.vue`**\r\n```vue\r\n\u003Ctemplate>\r\n {{error && [error] || data}}\r\n\u003C/template>\u003Ctemplate>\r\n \u003Cbutton @click=\"show=!show\">toggle\u003C/button>\r\n \u003CPage v-if=\"show\"/>\r\n\u003C/template>\r\n\u003Cscript setup>\r\nconst show = ref(false)\r\n\u003C/script>\r\n\u003Cscript setup>\r\nconst {error, data} = await useFetch('https://ord.uib.no/bm/fil/article100new.json')\r\n\u003C/script>\r\n```\r\n\r\n\r\n#### **`app.vue`**\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cbutton @click=\"show=!show\">toggle\u003C/button>\r\n \u003CPage v-if=\"show\"/>\r\n\u003C/template>\r\n\u003Cscript setup>\r\nconst show = ref(false)\r\n\u003C/script>\r\n```\r\n\r\nAfter the page has finished loading in the browser, disconnect from the internet, or select 'offline' in the browser devtools. Then click the button to render the Page-component. The error message will be \"\u003Cno response> Failed to fetch\", with status code 500.\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nWhen internet connection is lost, useFetch returns it as an internal server error when using an external API:\r\n{ \"cause\": \"TypeError: Failed to fetch\", \"message\": \"[GET] \\\"https://ord.uib.no/bm/fil/article100new.json\\\": \u003Cno response> Failed to fetch\", \"name\": \"Error\", \"statusCode\": 500 }\r\n\r\nIn the browser devtools I see an error code in fetch.js that makes more sense: net::ERR_INTERNET_DISCONNECTED, but I'm unable to capture this with useFetch.\r\n\r\n### Additional context\r\nThe error code is 500 even if SSR is disabled.\r\n\r\n### Logs\r\n\r\n_No response_",[2912,2915,2918,2921],{"name":2913,"color":2914},"enhancement","8DEF37",{"name":2916,"color":2917},"workaround available","11376d",{"name":2919,"color":2920},"upstream","E8A36D",{"name":2922,"color":2923},"🍰 p2-nice-to-have","0E8A16",24334,"Misleading error message in useFetch","2024-06-30T11:06:51Z","https://github.com/nuxt/nuxt/issues/24334",0.64864004,{"description":2930,"labels":2931,"number":2934,"owner":2877,"repository":2878,"state":2879,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### 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```",[2932,2933],{"name":2901,"color":2902},{"name":2889,"color":2890},3285,"Trailing slashes","2025-02-10T13:25:12Z","https://github.com/nuxt/ui/issues/3285",0.6564945,{"description":2940,"labels":2941,"number":2946,"owner":2877,"repository":2878,"state":2879,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### Description\n\nHi,\ni am working on a project where i am using the Table component with a couple of sortable columns, where i need to access the sorted list from the table. i can see the sorted list in the component, but it isn't exposed and also not included in any event.\n\nis there any way i am not aware of to access the sorted list? ",[2942,2943],{"name":2901,"color":2902},{"name":2944,"color":2945},"stale","ededed",3289,"Table: access sorted list","2025-03-20T02:03:08Z","https://github.com/nuxt/ui/issues/3289",0.65768355,{"description":2952,"labels":2953,"number":2959,"owner":2877,"repository":2878,"state":2960,"title":2961,"updated_at":2962,"url":2963,"score":2964},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v18.20.5\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: default\n- Runtime Modules: nuxt-vuefire@1.0.4, @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\nv3.0.0-alpha.9\n\n### Reproduction\n\n\n\n\n\n```\n \u003CUTooltip :delay-duration=\"0\" :text=\"`R$ ${transactionCost.brl}`\">\n \u003CUIcon class=\"text-yellow-500 text-xs\" name=\"i-lucide-coins\" />\n \u003Cp class=\"text-neutral-200 text-xs\">\n {{ transactionCost.credits }}\n \u003C/p>\n\u003C/UTooltip>\n```\n\n``` \n\u003CNuxtLayout>\n \u003CUApp :toaster=\"{ position: 'top-right' }\">\n \u003CNuxtPage />\n \u003C/UApp>\n\u003C/NuxtLayout>\n```\n\n\n### Description\n\nThe `app.vue` is already using the `UApp`. When I try to add a `UTooltip` inside the modal, it throw an error.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```\nUncaught (in promise) Error: Injection `Symbol(TooltipProviderContext)` not found. Component must be used within `TooltipProvider`\n```",[2954,2955,2958],{"name":2868,"color":2869},{"name":2956,"color":2957},"needs reproduction","CB47CF",{"name":2889,"color":2890},2801,"closed","[v3][UTooltip] `UTooltip` inside `UModal` causing error","2025-02-06T15:28:30Z","https://github.com/nuxt/ui/issues/2801",0.59074044,{"description":2966,"labels":2967,"number":2970,"owner":2877,"repository":2878,"state":2960,"title":2971,"updated_at":2972,"url":2973,"score":2974},"### Description\n\nBefore using `nuxt ui`, I briefly skimmed through the repository and found an already closed issue: [3018](https://github.com/nuxt/ui/issues/3018)\n\nThe error and solution mentioned in this issue (the [v2 documentation](https://ui.nuxt.com/getting-started/installation) indeed did not mention the solution) can actually be resolved by adding `tailwindcss@next` to the `peerDependencies` section in the `package.json` file.\n\nThis is because when [nuxi module add](https://github.com/nuxt/cli/blob/1afc06e8d08ea781fc5fede343de8d68865c2b4e/packages/nuxi/src/commands/module/add.ts#L134) installs a module, it not only installs the module itself but also scans the module package's `peerDependencies`.\n\nFor example, when using `nuxi module add pinia`, since `@pinia/nuxt` has `pinia` listed in its `peerDependencies` in the [package.json](https://github.com/vuejs/pinia/blob/3b21e08b6a068d18112b915b83f702fb5504ab73/packages/nuxt/package.json#L51C4-L51C20), both `@pinia/nuxt` and `pinia` will be automatically installed during the module installation.\n\nIf there are dependencies in `peerDependencies` that you do not want `nuxi module` to install automatically, you can use `peerDependenciesMeta` to ignore them, for [example](https://github.com/atinux/nuxt-auth-utils/blob/6b61b8888e3b3c6f60fd5ff767b7f0aa6cf09fc9/package.json#L57):\n\n```\n\"peerDependenciesMeta\": {\n \"pinia\": {\n \"optional\": true\n }\n },\n```\n\nTherefore, Nuxt UI can specify `tailwindcss@next` in the `peerDependencies` of `package.json`, ensuring Tailwind CSS is automatically installed when the Nuxt UI module is installed.\n\nThis solution applies to both v3 and v2.\n\n> PS: I noticed `typescript` in the `peerDependencies` of the v3 package.json. Is this a necessary dependency similar to `tailwindcss`? If not, after adding tailwindcss, perhaps `peerDependenciesMeta` could be used to ignore it.",[2968,2969],{"name":2901,"color":2902},{"name":2889,"color":2890},3349,"Add \"tailwindcss@next\" to the \"peerDependencies\" section in the package.json file.","2025-02-21T17:05:10Z","https://github.com/nuxt/ui/issues/3349",0.615995,{"description":2976,"labels":2977,"number":2981,"owner":2877,"repository":2878,"state":2960,"title":2982,"updated_at":2983,"url":2984,"score":2985},"### Description\n\nIt's shorter and can save traffic.\n\n### Additional context\n\n_No response_",[2978,2980],{"name":2913,"color":2979},"a2eeef",{"name":2889,"color":2890},3250,"Use `foo-(--bar)` instead of `foo-[var(--bar)]` for tailwindcss classes","2025-02-07T10:24:17Z","https://github.com/nuxt/ui/issues/3250",0.6176803,{"description":2987,"labels":2988,"number":2991,"owner":2877,"repository":2878,"state":2960,"title":2992,"updated_at":2993,"url":2994,"score":2995},"### Description\n\nHello, I just wanted to overwrite shadow-sm with another shadow in the card root slot.\nBut I failed to do so. I tried the :ui way and the app.config.ts way but in both cases the new class \"shadow-card\" ended up BEHIND \"shadow-sm\".\n\n```\n card: {\n slots: {\n root: \"shadow-card\",\n },\n },\n```\n\nSo shadow-card always gets overwritten by shadow-sm cause the code always ends up like this:\n```\n\u003Cdiv class=\"bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm shadow-card\">\n```\n\nso how can I overwrite shadow-sm here?",[2989,2990],{"name":2901,"color":2902},{"name":2889,"color":2890},2936,"Overwrite css classes of slots","2025-01-08T16:26:22Z","https://github.com/nuxt/ui/issues/2936",0.61990875,["Reactive",2997],{},["Set"],["ShallowReactive",3000],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f5kg-8s2yf0ggrZqegDcJSdplmVmpf8dOEM4b7nUG1Rs":-1},"/nuxt/nuxt.com/1403"]