\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.64462686,{"description":2002,"labels":2003,"number":2016,"owner":1994,"repository":1994,"state":1996,"title":2017,"updated_at":2018,"url":2019,"score":2020},"### 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_",[2004,2007,2010,2013],{"name":2005,"color":2006},"enhancement","8DEF37",{"name":2008,"color":2009},"workaround available","11376d",{"name":2011,"color":2012},"upstream","E8A36D",{"name":2014,"color":2015},"馃嵃 p2-nice-to-have","0E8A16",24334,"Misleading error message in useFetch","2024-06-30T11:06:51Z","https://github.com/nuxt/nuxt/issues/24334",0.64764285,{"description":2022,"labels":2023,"number":2027,"owner":1994,"repository":1994,"state":1996,"title":2028,"updated_at":2029,"url":2030,"score":2031},"### 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_",[2024],{"name":2025,"color":2026},"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.66930896,{"description":2033,"labels":2034,"number":2038,"owner":1994,"repository":2039,"state":1996,"title":2040,"updated_at":2041,"url":2042,"score":2043},"When attempting to render a component for a whitebox test, the entire Nuxt environment is being loaded instead of just the component. This behavior is likely caused by the presence of an authentication guard in the project, which leads to redirection to the sign-in page during test execution.\r\n\r\n### Steps to Reproduce\r\nAccess the following StackBlitz link: [Reproduction Test](https://stackblitz.com/edit/nuxt-vitest-ewepwb?file=test%2Ftest.nuxt.spec.ts)\r\n\r\n### Expected Behavior\r\nThe test should only render the targeted component without triggering global route middleware or redirections.\r\n\r\n### Actual Behavior\r\nUpon running the test, the entire Nuxt environment is loaded, including global route middleware, leading to redirection to the sign-in page due to the presence of the authentication guard.\r\n\r\n### Additional Information\r\nNuxt project info: \r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.16.0\r\n- Nuxt Version: 3.5.3\r\n- Nitro Version: 2.4.1\r\n- Package Manager: yarn@3.6.0\r\n- Builder: vite\r\n- User Config: alias, app, build, sourcemap, ssr, runtimeConfig, vite, css, modules, components, ignore, dayjs, typescript, experimental, devtools\r\n- Runtime Modules: dayjs-nuxt@1.1.2, nuxt-vitest@0.10.2, @pinia/nuxt@^0.4.11\r\n- Build Modules: -\r\n------------------------------",[2035],{"name":2036,"color":2037},"vitest-environment","b60205",526,"test-utils","Components tests it is triggering global route middleware","2024-12-22T21:23:11Z","https://github.com/nuxt/test-utils/issues/526",0.6779908,{"description":2045,"labels":2046,"number":2048,"owner":1994,"repository":1994,"state":1996,"title":2049,"updated_at":2050,"url":2051,"score":2052},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\n1. Go to this repo: https://stackblitz.com/edit/github-hgj6ru?file=app.vue and notice that on first render, we get an error back because we send a request to a bad url for both useAsyncData and useFetch\r\n2. Click the refresh button and notice that instead of an error, we get back a response in `data`\n\n### Describe the bug\n\nWhy do I get an bad request error when the api composables nuxt provides make the call on the server to a url with no endpoiunt, but then a 200 with a response in `data` on rehydration? Is this expected? How do I get consistent expected output? \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2047],{"name":2025,"color":2026},26741,"api call handling different between ssr and client with useFetch and useAsyncData","2024-06-30T11:04:34Z","https://github.com/nuxt/nuxt/issues/26741",0.68010145,{"description":2054,"labels":2055,"number":2060,"owner":1994,"repository":1994,"state":2061,"title":2062,"updated_at":2063,"url":2064,"score":2065},"### 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_",[2056,2059],{"name":2057,"color":2058},"3.x","29bc7f",{"name":2025,"color":2026},14977,"closed","useFetch() does not forward server-side createError()","2024-02-21T08:06:58Z","https://github.com/nuxt/nuxt/issues/14977",0.65438324,{"description":2067,"labels":2068,"number":2077,"owner":1994,"repository":1994,"state":2061,"title":2078,"updated_at":2079,"url":2080,"score":2081},"### 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_",[2069,2070,2071,2074],{"name":2057,"color":2058},{"name":2025,"color":2026},{"name":2072,"color":2073},"needs reproduction","FBCA04",{"name":2075,"color":2076},"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.6659506,{"description":2083,"labels":2084,"number":2087,"owner":1994,"repository":1994,"state":2061,"title":2088,"updated_at":2089,"url":2090,"score":2091},"### 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_",[2085,2086],{"name":2057,"color":2058},{"name":2025,"color":2026},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.6668432,{"description":2093,"labels":2094,"number":2096,"owner":1994,"repository":1994,"state":2061,"title":2097,"updated_at":2098,"url":2099,"score":2100},"### 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```",[2095],{"name":2025,"color":2026},30917,"fetchData causes onErrorCaptured to be unable to capture errors","2025-02-22T20:46:13Z","https://github.com/nuxt/nuxt/issues/30917",0.6678368,{"description":2102,"labels":2103,"number":2106,"owner":1994,"repository":1994,"state":2061,"title":2107,"updated_at":2108,"url":2109,"score":2110},"### Environment\n\n- Operating System: Windows_NT\r\n- Node Version: v20.17.0\r\n- Nuxt Version: 3.13.2\r\n- CLI Version: 3.13.2\r\n- Nitro Version: 2.9.7\r\n- Package Manager: yarn@1.22.19\r\n- Builder: -\r\n- User Config: devtools, devServer, css, extends, modules, runtimeConfig, compatibilityDate, hooks, components \r\n- Runtime Modules: @nuxt/ui@2.18.4, @pinia/nuxt@0.5.4, @pi\r\nnia-plugin-persistedstate/nuxt@1.2.1, dayjs-nuxt@2.1.11, @n\r\nuxtjs/device@3.2.3, @nuxtjs/color-mode@3.5.1, @nuxtjs/tailwindcss@6.12.1, @vant/nuxt@1.0.6, @vueuse/nuxt@11.1.0 \r\n- Build Modules: -\r\n------------------------------\r\n\n\n### Reproduction\n\nThe returned data Code=0, but his judgment does not hold, it seems that the correct data will only be returned after judgment. I directly output the returned data, which is undefined.\r\n\r\n\n\n### Describe the bug\n\nUsefetch has a serious bug, why does it delay receiving return messages?\r\nThe returned data Code=0, but his judgment does not hold, it seems that the correct data will only be returned after judgment. I directly output the returned data, which is undefined.\r\n\r\n\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2104,2105],{"name":2025,"color":2026},{"name":2072,"color":2073},29189,"Usefetch has a serious bug, why does it delay receiving return messages?","2024-09-28T14:08:33Z","https://github.com/nuxt/nuxt/issues/29189",0.66876936,["Reactive",2112],{},["Set"],["ShallowReactive",2115],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"bnt8eLmuVQAtHiOdTvo4Qh8WYd-HyxzIwwjBxDJVVI8":-1},"/nuxt/ui/3296"]