\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```",[2867,2870,2873],{"name":2868,"color":2869},"bug","d73a4a",{"name":2871,"color":2872},"v3","49DCB8",{"name":2874,"color":2875},"triage","ffffff",3607,"nuxt","ui","open","Background-Color for UTable","2025-03-18T15:08:25Z","https://github.com/nuxt/ui/issues/3607",0.6417387,{"description":2885,"labels":2886,"number":2899,"owner":2877,"repository":2877,"state":2879,"title":2900,"updated_at":2901,"url":2902,"score":2903},"### 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_",[2887,2890,2893,2896],{"name":2888,"color":2889},"enhancement","8DEF37",{"name":2891,"color":2892},"workaround available","11376d",{"name":2894,"color":2895},"upstream","E8A36D",{"name":2897,"color":2898},"馃嵃 p2-nice-to-have","0E8A16",24334,"Misleading error message in useFetch","2024-06-30T11:06:51Z","https://github.com/nuxt/nuxt/issues/24334",0.64691585,{"description":2905,"labels":2906,"number":2910,"owner":2877,"repository":2877,"state":2879,"title":2911,"updated_at":2912,"url":2913,"score":2914},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.6.5\r\n- Nitro Version: 2.5.2\r\n- Package Manager: npm@9.4.2\r\n- Builder: vite\r\n- User Config: ssr\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nReproduction link: [https://stackblitz.com/edit/github-eykmgq?file=app.vue](https://stackblitz.com/edit/github-eykmgq?file=app.vue) Please check console logs.\r\n\r\n1. get error from useFetch\r\n2. watch status and on error check if error.value is instanceof `FetchError`\r\n3. get true\r\n4. get error from awaited useFetch\r\n5. check if error.value is instanceof `FetchError`\r\n6. get false\n\n### Describe the bug\n\nError returned from useFetch has different instanceof FetchError value depending if useFetch is awaited. For awaited useFetch it's strangely `false`\n\n### Additional context\n\nPlease note that I'm using nuxt with `ssr: false` config option\n\n### Logs\n\n_No response_",[2907],{"name":2908,"color":2909},"pending triage","E99695",22753,"Error returned from useFetch has different instanceof FetchError value depending if useFetch is awaited","2024-06-30T11:07:53Z","https://github.com/nuxt/nuxt/issues/22753",0.67134786,{"description":2916,"labels":2917,"number":2919,"owner":2877,"repository":2877,"state":2920,"title":2921,"updated_at":2922,"url":2923,"score":2924},"### Environment\n\nStackblitz Sandbox\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-7wcdxads?file=app.vue,components%2FErrorContent.vue\n\n### Describe the bug\n\nI want to intercept errors within the component as much as possible, so that they only affect the current component and do not cause the entire page to crash. However, I tried the following three methods (all based on onErrorCaptured), and they work fine when useFetch is not used on the page. But once useFetch is used, the page directly returns a 500 status code, and I am unable to intercept the relevant errors to prevent the page from crashing.\n\nhttps://cn.vuejs.org/api/composition-api-lifecycle#onerrorcaptured\nhttps://nuxt.com/docs/getting-started/error-handling#vue-errors\nhttps://nuxt.com/docs/api/components/nuxt-error-boundary\n\nI hope there is a way to intercept errors within the component when using useFetch, so that it doesn't cause the entire page to display a 500 error, thanks.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2918],{"name":2908,"color":2909},30917,"closed","fetchData causes onErrorCaptured to be unable to capture errors","2025-02-22T20:46:13Z","https://github.com/nuxt/nuxt/issues/30917",0.64792925,{"description":2926,"labels":2927,"number":2932,"owner":2877,"repository":2877,"state":2920,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.18.0`\r\n- Nuxt Version: `3.7.4`\r\n- CLI Version: `3.9.0`\r\n- Nitro Version: `2.6.3`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `-`\r\n- User Config: `app`, `modules`, `components`, `nitro`, `runtimeConfig`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@6.8.0`, `@nuxtjs/plausible@0.2.3`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ca @click=\"fetch('400')\"> 400 \u003C/a>\r\n \u003Ca @click=\"fetch('404')\"> 404 \u003C/a>\r\n \u003Ca @click=\"fetch('500')\"> 500 \u003C/a>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\" setup>\r\n const runtimeConfig = useRuntimeConfig()\r\n async function fetch(url) {\r\n await useFetch(`${runtimeConfig.public.apiURL}/${url}`, {\r\n onRequest({ request, options }) {\r\n console.log('Inside onRequest')\r\n },\r\n onResponse({ request, response, options }) {\r\n console.log('Inside onResponse')\r\n },\r\n onResponseError({ request, response, options }) {\r\n console.log('Inside onResponseError')\r\n }\r\n })\r\n }\r\n\u003C/script>\r\n```\r\n\r\n### Describe the bug\r\n\r\nOn a server error, useFetch fired twice. In my code example, 400 and 404 work as expected, but on 500 the request is fired again. Here are the console.log messages from the code if you click on every anchor.\r\n\r\n```\r\nInside onRequest test.vue:16:16\r\nXHRGET\r\nhttp://127.0.0.1:8000/400\r\n[HTTP/1.1 400 Bad Request 13ms]\r\nInside onResponse test.vue:19:16\r\nInside onResponseError test.vue:22:16\r\n\r\nInside onRequest test.vue:16:16\r\nXHRGET\r\nhttp://127.0.0.1:8000/404\r\n[HTTP/1.1 404 Not Found 12ms]\r\nInside onResponse test.vue:19:16\r\nInside onResponseError test.vue:22:16\r\n\r\nInside onRequest test.vue:16:16\r\nXHRGET\r\nhttp://127.0.0.1:8000/500\r\n[HTTP/1.1 500 Internal Server Error 11ms]\r\nInside onResponse test.vue:19:16\r\nInside onResponseError test.vue:22:16\r\n\r\nInside onRequest test.vue:16:16\r\nXHRGET\r\nhttp://127.0.0.1:8000/500\r\n[HTTP/1.1 500 Internal Server Error 10ms]\r\nInside onResponse test.vue:19:16\r\nInside onResponseError test.vue:22:16\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2928,2931],{"name":2929,"color":2930},"3.x","29bc7f",{"name":2908,"color":2909},23457,"useFetch is fired twice if server returns with a 500 Error","2023-09-29T06:43:46Z","https://github.com/nuxt/nuxt/issues/23457",0.654279,{"description":2938,"labels":2939,"number":2942,"owner":2877,"repository":2877,"state":2920,"title":2943,"updated_at":2944,"url":2945,"score":2946},"### Environment\n\nrc10\n\n### Reproduction\n\n\r\n\r\nserver-side route.get.js: \r\n`return createError({ statusCode: 500, statusMessage: 'foo some details' })`\r\n\r\nclient-side template.vue:\r\n\r\n```\r\n\u003Cscript server>\r\nconst { data, error } = await useFetch('/api/route')\r\n\r\nif (error) {\r\n// error does not contain any of the details that were in the response message that was created with createError\r\n}\r\n\u003C/script>\r\n```\n\n### Describe the bug\n\nuseFetch() does not forward server-side createError()\r\n\r\ncurrent behavior: generic error message appears in template\r\n\r\nexpected: full createError() message that is also visible when going to /api/route should be available in the vue template\r\n\n\n### Additional context\n\nMy current workaround is as follows: in useFetch() onResponseError(), re-throw the actual response data via createError. \r\nThen the error check `if(error)` will work and we can re-throw the error.\r\n\r\nIdeally, both the `onResponseError()` and the `if(error){throw error.value}` should not be needed.\r\n\r\n```\r\n\u003Cscript server>\r\nconst { data, error } = await useFetch('/api/route',\r\n {\r\n headers: useRequestHeaders(['cookie']),\r\n onResponseError({ request, response, options }) {\r\n throw createError(response._data)\r\n }\r\n }\r\n)\r\n\r\nif (error) {\r\n throw error.value\r\n}\r\n\u003C/script>\r\n```\n\n### Logs\n\n_No response_",[2940,2941],{"name":2929,"color":2930},{"name":2908,"color":2909},14977,"useFetch() does not forward server-side createError()","2024-02-21T08:06:58Z","https://github.com/nuxt/nuxt/issues/14977",0.65547067,{"description":2948,"labels":2949,"number":2952,"owner":2877,"repository":2877,"state":2920,"title":2953,"updated_at":2954,"url":2955,"score":2956},"### Environment\r\n\r\nStackblitz\r\n\r\n```\r\nWorking directory: /home/projects/nuxt-starter-t11enq\r\nNuxt project info:\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.10.1\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, imports\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-5g2kqi?file=app.vue\r\n\r\n### Describe the bug\r\n\r\nI have a server api route that throws an error if something goes wrong. The error includes custom fields like `validation`, `code` etc. that the 3rd party backend actually sends back in the HTTP response. My Nuxt server api route contacts that 3rd party backend API and receives the HTTP response. But when I try to use `useFetch()` or `$fetch` from my Vue components then I am unable to access all these error fields.\r\n\r\nIn the real world this would be an Apollo GraphQL request that would throw the error in the server api route that I then need to be able to access in the Vue component but the FetchError simply does not seem to include all that information from the original error / http response.\r\n\r\nMy server api throws this error:\r\n\r\n```ts\r\nexport default defineEventHandler(() => {\r\n const isRequestValid = false\r\n\r\n if (isRequestValid) {\r\n return {\r\n users: [{ id: 1, username: 'John Doe' }]\r\n }\r\n } else {\r\n throw {\r\n name: 'Users',\r\n cause: 'Could not load users',\r\n code: 'USERS_LOAD_ERROR',\r\n guiltyDeveloper: 'John Doe',\r\n validation: {\r\n username: 'Username is required',\r\n }\r\n }\r\n }\r\n})\r\n```\r\n\r\nAnd then in my Vue component I try to access this error but I do not see the full error object:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n data: \u003Cpre>{{ data }}\u003C/pre>\r\n error: \u003Cpre>{{ error }}\u003C/pre>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\n const { data, error, refresh } = await useFetch('/api/users', { method: 'POST', lazy: true })\r\n\r\n console.log(data.value)\r\n console.log(error.value)\r\n\r\n onMounted(async () => {\r\n setTimeout(async () => {\r\n await refresh()\r\n \r\n console.log(data.value)\r\n console.log(error.value)\r\n }, 5000)\r\n\r\n try {\r\n await $fetch('/api/users', { method: 'POST' })\r\n } catch (exception) {\r\n console.log(exception)\r\n console.log(exception.data)\r\n console.log(exception.response)\r\n }\r\n })\r\n\u003C/script>\r\n```\r\n\r\nThe most that I see is this:\r\n\r\n```ts\r\n{\r\n \"_data\": {\r\n \"url\": \"/api/users\",\r\n \"statusCode\": 500,\r\n \"statusMessage\": \"\",\r\n \"message\": \"Error\",\r\n \"stack\": \"\u003Cpre>\u003Cspan class=\\\"stack internal\\\">at createError (./node_modules/.pnpm/h3@1.10.1/node_modules/h3/dist/index.mjs:79:15)\u003C/span>\\n\u003Cspan class=\\\"stack internal\\\">at Server.toNodeHandle (./node_modules/.pnpm/h3@1.10.1/node_modules/h3/dist/index.mjs:1909:21)\u003C/span>\\n\u003Cspan class=\\\"stack internal\\\">at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\u003C/span>\u003C/pre>\"\r\n }\r\n}\r\n```\r\n\r\nNo matter what I do, I am unable to access the full raw HTTP response. Where is my `validation` field? Or where is the `guiltyDeveloper` field and `code` and `cause`?\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2950,2951],{"name":2929,"color":2930},{"name":2908,"color":2909},25745,"Unable to get the full error message when using useFetch() or $fetch","2024-02-11T19:44:28Z","https://github.com/nuxt/nuxt/issues/25745",0.66297585,{"description":2958,"labels":2959,"number":2968,"owner":2877,"repository":2877,"state":2920,"title":2969,"updated_at":2970,"url":2971,"score":2972},"### Environment\r\n\r\nnuxt: 3.8.2\r\n\r\n### Reproduction\r\n\r\n```ts\r\nconst newOptions: UseFetchOptions\u003CT> = {\r\n baseURL: BASE_URL,\r\n method,\r\n // headers: { ...normalParams },\r\n onRequest ({ options }) {\r\n options.headers = {\r\n ...optionsHeader,\r\n 'Content-Type': 'application/json'\r\n }\r\n },\r\n async onResponse ({ response }) {\r\n const responseData = typeof response._data === 'string' ? JSON.parse(response._data) : response._data\r\n const { code } = responseData\r\n if (code === RESPOND.SUCCESS) {\r\n return response._data\r\n } else if (NOT_FOUND_CODES.includes(code)) {\r\n navigateTo('/404/')\r\n return Promise.reject(response._data)\r\n } else {\r\n if (LOGOUT_CODES.includes(code)) {\r\n user.clearUserInfo()\r\n }\r\n return response._data\r\n }\r\n },\r\n onResponseError ({ response }) {\r\n return response?._data ?? null\r\n },\r\n ...options\r\n }\r\n\r\nuseFetch(url, newOptions)\r\n .then((res) => {\r\n if (typeof res.data.value === 'string') {\r\n resolve(JSON.parse(res.data.value))\r\n } else {\r\n resolve(res.data.value)\r\n }\r\n })\r\n .catch((error) => {\r\n reject(error)\r\n })\r\n```\r\n\r\n### Describe the bug\r\n\r\n\r\n\r\n\r\nthe same request in production environment锛宻tatus is error and data is null, but in development environment i got data and status is success.\r\nonResponse and onResponseError is not executed.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2960,2961,2962,2965],{"name":2929,"color":2930},{"name":2908,"color":2909},{"name":2963,"color":2964},"needs reproduction","FBCA04",{"name":2966,"color":2967},"closed-by-bot","ededed",25032,"useFetch request status is error, data is null","2024-01-11T01:49:31Z","https://github.com/nuxt/nuxt/issues/25032",0.6637988,{"description":2974,"labels":2975,"number":2982,"owner":2877,"repository":2877,"state":2920,"title":2983,"updated_at":2984,"url":2985,"score":2986},"### Environment\n\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v14.20.0`\r\n- Nuxt Version: `3.0.0-rc.9`\r\n- Nitro Version: `0.5.1`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `modules`, `css`, `typescript`, `vite`, `build`\r\n- Runtime Modules: `@vueuse/nuxt@9.2.0`, `@nuxtjs/supabase@0.1.25`, `@pinia/nuxt@0.4.2`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nNot required\n\n### Describe the bug\n\nThe typing of the Error that is returned from the `useFetch` composable is as as follow `Ref\u003Ctrue | Error | null>` however the actually error returned is not the default Error type and is actually of type `FetchError` ([source](https://github.com/unjs/ohmyfetch/blob/a5ebc970414a46f403f552812a46850adcbc71f7/src/error.ts))\r\n\r\nSo in order to actually get to the extra information of the error casting is required.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2976,2979,2980,2981],{"name":2977,"color":2978},"types","2875C3",{"name":2929,"color":2930},{"name":2868,"color":2869},{"name":2897,"color":2898},14879,"`useFetch()` incorrectly typed error","2023-01-19T17:41:45Z","https://github.com/nuxt/nuxt/issues/14879",0.6639843,{"labels":2988,"number":2996,"owner":2877,"repository":2877,"state":2920,"title":2997,"updated_at":2998,"url":2999,"score":3000},[2989,2992,2993,2994],{"name":2990,"color":2991},"documentation","5319e7",{"name":2929,"color":2930},{"name":2868,"color":2869},{"name":2995,"color":2964},"馃敤 p3-minor",13583,"`useFetch` data return null with mismatching client/request options","2024-09-12T17:23:04Z","https://github.com/nuxt/nuxt/issues/13583",0.66538984,["Reactive",3002],{},["Set"],["ShallowReactive",3005],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fbnt8eLmuVQAtHiOdTvo4Qh8WYd-HyxzIwwjBxDJVVI8":-1},"/nuxt/ui/3296"]