\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.6242912,{"description":2885,"labels":2886,"number":2890,"owner":2877,"repository":2891,"state":2879,"title":2892,"updated_at":2893,"url":2894,"score":2895},"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------------------------------",[2887],{"name":2888,"color":2889},"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.6487704,{"description":2897,"labels":2898,"number":2901,"owner":2877,"repository":2878,"state":2879,"title":2902,"updated_at":2903,"url":2904,"score":2905},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.15.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.13.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/eslint@0.4.0, @vueuse/nuxt@10.11.1, @nuxt/ui@2.19.2, @pinia/nuxt@0.5.5, nuxt-echarts@0.2.4\n- Build Modules: -\n\n### Version\n\nv2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-8d9s2j?file=app.vue\n\n### Description\n\nThe UInput component does not handle compositionstart and compositionend events, resulting in issues for languages that rely on input composition, such as Chinese (e.g., Pinyin input). Vue’s default behavior for v-model on native input elements ensures that updates are delayed until the composition ends, preventing intermediate values from triggering updates. However, the UInput component currently lacks this mechanism, causing inconsistencies with Vue’s default form handling and leading to unexpected behavior during text composition.\n\n### Additional context\n\n\n\n```vue\n\u003Ctemplate>\n\t\u003Cinput v-model=\"keyword\" />\n\u003C/template>\n\n\u003Cscript setup>\n\tconst keyword = ref('');\n\n\twatchEffect(() => {\n\t\tconsole.log('🚀 ~ watchEffect ~ keyword.value:', keyword.value);\n\t});\n\u003C/script>\n```\n\n\n\n```vue\n\u003Ctemplate>\n\t\u003CUInput v-model=\"keyword\" />\n\u003C/template>\n\n\u003Cscript setup>\n\tconst keyword = ref('');\n\n\twatchEffect(() => {\n\t\tconsole.log('🚀 ~ watchEffect ~ keyword.value:', keyword.value);\n\t});\n\u003C/script>\n```\n\n### Logs\n\n```shell-script\n\n```",[2899,2900],{"name":2868,"color":2869},{"name":2874,"color":2875},2713,"UInput Component Lacks Proper Handling of compositionstart and compositionend","2024-11-21T06:40:46Z","https://github.com/nuxt/ui/issues/2713",0.70009977,{"description":2907,"labels":2908,"number":2909,"owner":2877,"repository":2877,"state":2879,"title":2910,"updated_at":2911,"url":2912,"score":2913},"### Describe the feature\n\nWhen `useFetch` re-fetches (e.g. after a watched state changes), `data` is reset to `null` during the fetch. That causes visible flickering or full UI resets, even when only minor changes happen like pagination or filters.\n\nIn many apps, it's more useful to keep the previous data visible while the new request is in progress.\n\n## Suggested API\n\n```javascript\nconst { data } = await useFetch(\"/api/items\", {\n query: {\n 'page': page\n },\n watch: [page],\n preservePreviousData: true\n});\n```\nWhen preservePreviousData is true, data should hold the last successful value during the next fetch until the new result arrives.\n\n## Current workaround\n\nRight now, we have to manually store the previous data in a separate `ref` using `watch`, and use a `computed` to fall back to it when the current `data` is `null`. This adds boilerplate for a fairly common use case.\n\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[],31999,"[useFetch] Option to preserve previous data during refresh","2025-05-15T11:09:43Z","https://github.com/nuxt/nuxt/issues/31999",0.7003384,{"description":2915,"labels":2916,"number":2921,"owner":2877,"repository":2878,"state":2879,"title":2922,"updated_at":2923,"url":2924,"score":2925},"### Description\n\nHow can I assign an ID to a tab so that I can scroll directly to it?\nCurrently, I’m working around this by giving the div inside the slot (i.e. the tab content) an ID. When the tab is opened, I scroll to that ID manually.\n\n```\n\u003Ctemplate>\n \u003CUAccordion\n v-model=\"currentOpen\"\n :ui=\"accordionStyle\"\n :items=\"items\"\n >\n \u003Ctemplate #component=\"{ item }\">\n \u003Ccomponent\n :is=\"getComponent((item as CustomAccordionItem).componentName)\"\n :id=\"(item as CustomAccordionItem).sectionKey\"\n :section-key=\"(item as CustomAccordionItem).sectionKey\"\n @section-mounted=\"sectionMounted\"\n />\n \u003C/template>\n \u003C/UAccordion>\n\u003C/template>\n```\n\ndid i miss something?\n\n### Additional context\n\n_No response_",[2917,2920],{"name":2918,"color":2919},"enhancement","a2eeef",{"name":2874,"color":2875},3868,"Allow assigning IDs to Nuxt UI Tab panels for scroll targeting","2025-04-12T08:35:52Z","https://github.com/nuxt/ui/issues/3868",0.7050349,{"description":2927,"labels":2928,"number":2890,"owner":2877,"repository":2929,"state":2930,"title":2931,"updated_at":2932,"url":2933,"score":2895},"https://www.figma.com/file/OLlmzoVQ7FSBh4FJJORNpl/%F0%9F%96%A5---nuxt.com?node-id=4854%3A41400\n\nhttps://www.figma.com/file/OLlmzoVQ7FSBh4FJJORNpl/%F0%9F%96%A5---nuxt.com?node-id=4854%3A42110\n\nhttps://github.com/nuxt/nuxtjs.org/tree/main/content/_collections/partners",[],"nuxt.com","closed","[Community] Partners integration `/community/partners`","2023-02-15T12:32:29Z","https://github.com/nuxt/nuxt.com/issues/526",{"description":2935,"labels":2936,"number":2942,"owner":2877,"repository":2891,"state":2930,"title":2943,"updated_at":2944,"url":2945,"score":2946},"Because `happy-dom` is not fully compatible with `jsdom`, we can't use, for example, `@testing-library/jest-dom` within the Nuxt environment. \r\nI suggest to add possibility to replace `happy-dom` with `jsdom`, `@happy-dom/jest-environment` etc.",[2937,2938,2941],{"name":2918,"color":2919},{"name":2939,"color":2940},"good first issue","7057ff",{"name":2888,"color":2889},553,"Add option to replace `happy-dom` with `jsdom`","2023-12-02T00:37:13Z","https://github.com/nuxt/test-utils/issues/553",0.653506,{"description":2948,"labels":2949,"number":2962,"owner":2877,"repository":2877,"state":2930,"title":2963,"updated_at":2964,"url":2965,"score":2966},"### 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,status 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_",[2950,2953,2956,2959],{"name":2951,"color":2952},"3.x","29bc7f",{"name":2954,"color":2955},"pending triage","E99695",{"name":2957,"color":2958},"needs reproduction","FBCA04",{"name":2960,"color":2961},"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.67073584,{"description":2968,"labels":2969,"number":2972,"owner":2877,"repository":2877,"state":2930,"title":2973,"updated_at":2974,"url":2975,"score":2976},"### Environment\r\n\r\nNuxt project info: 10:45:42\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v16.15.1\r\n- Nuxt Version: 3.6.1\r\n- Nitro Version: 2.5.2\r\n- Package Manager: npm@8.11.0\r\n- Builder: vite\r\n- User Config: pages\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\n```javascript\r\n\u003Cscript setup>\r\n/**\r\n * 请求api接口\r\n * @returns {Promise\u003Cany>}\r\n */\r\nconst getData = async () => {\r\n const { data, pending, error, refresh } = await useFetch('/api/test', {\r\n onResponse({ request, response, options }) {\r\n // 处理响应数据\r\n // localStorage.setItem('token', response._data.token)\r\n console.log(\"响应成功数据:\", response);\r\n }\r\n })\r\n\r\n console.log(\"data:\", data);\r\n}\r\n\r\nonMounted(() => {\r\n getData()\r\n})\r\n\u003C/script>\r\n\r\n```\r\n\r\n### Describe the bug\r\n\r\n### 标题:在 Nuxt 3.0 中,useFetch 的 onResponse 在 onMounted 中无法被执行\r\n\r\n### 描述:\r\n\r\n在我使用 Nuxt 3.0 的 useFetch 功能时,我发现了一个问题。如果我在 onMounted 的生命周期钩子中调用 useFetch,onResponse 似乎无法获取结果,或者说 onResponse 方法没有被执行。然而,如果我直接在 setup 中调用 useFetch,onResponse 就会被执行。这是我的代码:\r\n\r\n```javascript\r\n\u003Cscript setup>\r\n/**\r\n * 请求api接口\r\n * @returns {Promise\u003Cany>}\r\n */\r\nconst getData = async () => {\r\n const { data, pending, error, refresh } = await useFetch('/api/test', {\r\n onResponse({ request, response, options }) {\r\n // 处理响应数据\r\n // localStorage.setItem('token', response._data.token)\r\n console.log(\"响应成功数据:\", response);\r\n }\r\n })\r\n\r\n console.log(\"data:\", data);\r\n}\r\n\r\nonMounted(() => {\r\n getData()\r\n})\r\n\u003C/script>\r\n```\r\n### 重现步骤:\r\n\r\n1. 创建一个新的 Nuxt 3.0 项目。\r\n2. 在 onMounted 的生命周期钩子中调用 useFetch。\r\n3. 观察控制台,无法看到 \"响应成功数据\" 的日志输出。\r\n\r\n**期望的行为:**\r\nonResponse 在 onMounted 中被正确执行,并在控制台输出 \"响应成功数据\"。\r\n\r\n**实际的行为:**\r\nonResponse 在 onMounted 中没有被执行。\r\n\r\n**环境信息:**\r\nNuxt.js 版本:3.0\r\n浏览器版本:Firefox 116.0.3 (64 位)\r\n操作系统:Windows 11\r\nNode.js 版本:16.15.1\r\n\r\n**附加信息:**\r\n我尝试在 setup 中直接调用 useFetch,这时 onResponse 可以被正确执行。\r\n\r\n\r\n\r\n*****\r\n\r\n\r\n\r\n\r\n### Title: In Nuxt 3.0, useFetch's onResponse is not executed in onMounted\r\n\r\n### Description:\r\n\r\nWhile using the useFetch feature in Nuxt 3.0, I encountered a problem. If I call useFetch in the onMounted lifecycle hook, onResponse seems unable to obtain a result, or in other words, the onResponse method is not executed. However, if I call useFetch directly in setup, onResponse is executed. Here is my code:\r\n\r\n```javascript\r\n\u003Cscript setup>\r\n/**\r\n * Request API interface\r\n * @returns {Promise\u003Cany>}\r\n */\r\nconst getData = async () => {\r\n const { data, pending, error, refresh } = await useFetch('/api/test', {\r\n onResponse({ request, response, options }) {\r\n // Processing response data\r\n // localStorage.setItem('token', response._data.token)\r\n console.log(\"Successful response data:\", response);\r\n }\r\n })\r\n\r\n console.log(\"data:\", data);\r\n}\r\n\r\nonMounted(() => {\r\n getData()\r\n})\r\n\u003C/script>\r\n```\r\n### Steps to reproduce:\r\nCreate a new Nuxt 3.0 project.\r\nCall useFetch in the onMounted lifecycle hook.\r\nObserve the console, the \"Successful response data\" log output is not visible.\r\n\r\n### Expected behavior:\r\nonResponse is correctly executed in onMounted, and \"Successful response data\" is output to the console.\r\n\r\n### Actual behavior:\r\nonResponse is not executed in onMounted.\r\n\r\n### Environment Information:\r\nNuxt.js version: 3.0\r\nBrowser version: Firefox 116.0.3 (64-bit)\r\nOperating System: Windows 11\r\nNode.js version: 16.15.1\r\n\r\n### Additional Information:\r\nWhen I try to call useFetch directly in setup, onResponse is correctly executed.\r\n\r\n### Additional context\r\n\r\n完整代码如下(The complete code is as follows):\r\n``` vue\r\n\u003C!-- index.vue -->\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ch1>欢迎来到我的首页\u003C/h1>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n/**\r\n * 请求api接口\r\n * @returns {Promise\u003Cany>}\r\n */\r\nconst getData = async () => {\r\n const { data, pending, error, refresh } = await useFetch('/api/test', {\r\n onResponse({ request, response, options }) {\r\n // 处理响应数据\r\n // localStorage.setItem('token', response._data.token)\r\n console.log(\"响应成功数据:\", response);\r\n }\r\n })\r\n\r\n console.log(\"data:\", data);\r\n}\r\n\r\nonMounted(() => {\r\n getData()\r\n})\r\n\r\n\r\n\u003C/script>\r\n\r\n\u003Cstyle scoped>\u003C/style> \r\n``` \r\n\r\n\r\n### Logs\r\n\r\n_No response_",[2970,2971],{"name":2951,"color":2952},{"name":2954,"color":2955},22688,"在 Nuxt 3.0 中,useFetch 的 onResponse 在 onMounted 中无法被执行","2023-12-29T08:03:51Z","https://github.com/nuxt/nuxt/issues/22688",0.67740536,{"description":2978,"labels":2979,"number":2982,"owner":2877,"repository":2877,"state":2930,"title":2983,"updated_at":2984,"url":2985,"score":2986},"### Environment\n\nrc-13\r\nnode-18\n\n### Reproduction\n\n//composable\r\n```javascript\r\nconst myfetch = async (url,options,emits) => {\r\n const { data, pending, error, refresh } = await useFetch(url, {\r\n \r\n ...options,\r\n baseURL: useRuntimeConfig().API_URL, \r\n initialCache: false,\r\n headers: new Headers({ 'authorization': (process.client)?localStorage.getItem(\"token\"):''}),\r\n onResponse ({ response }) {\r\n return response._data\r\n },\r\n onResponseError ({ response }) {\r\n return response._data\r\n }\r\n })\r\n const resData = data.value\r\n \r\n return resData\r\n }\r\n```\r\n//component 1\r\n\r\n```javascript\r\n\u003Cscript setup>\r\ngetAllItems();\r\nasync function getAllItems() {\r\n let response = await myfetch('/article/artPosts?' +\r\n 'page=' + page.value + '&' +\r\n 'artPostGroup=' + artPostGroup.value + '&' +\r\n 'limit=' + limit.value, {\r\n method: 'GET'\r\n });\r\n if (response.data)\r\n list.value = response.data.docs;\r\n pages.value = response.data.pages;\r\n}\r\n\u003C/script>\r\n```\r\n\r\n//component 2\r\n\r\n```javascript\r\n\u003Cscript setup>\r\ngetAllItems();\r\nasync function getAllItems() {\r\n let response = await myfetch('/store/storeCourses?' +\r\n 'page=' + page.value + '&' +\r\n 'storeCourseGroup=' + storeCourseGroup.value + '&' +\r\n 'limit=' + limit.value, {\r\n method: 'GET'\r\n });\r\n if (response.data)\r\n list.value = response.data.docs;\r\n pages.value = response.data.pages;\r\n}\r\n\u003C/script>\r\n```\r\n//home.vue\r\n```javascript\r\n\u003Cdiv>\r\n\u003Ccomponent1>\u003C/component1>\r\n\u003Ccomponent2>\u003C/component2>\r\n\u003C/div>\r\n```\n\n### Describe the bug\n\nthe bug is here...\r\nin the page load:\r\nresponse of component1 is the same as response of component2...\r\n\r\n\r\nwhen i use $fetch instead of useFetch, it works good but it makes another problem for me...\r\n\r\non refreshing page,it send a request twice to server\r\n\n\n### Additional context\n\nhow can i write function in composables?\n\n### Logs\n\n_No response_",[2980,2981],{"name":2951,"color":2952},{"name":2954,"color":2955},15451,"UseFetch() calling multiple request, only the last data is fetched and $fetch send requests twice","2023-01-19T17:50:37Z","https://github.com/nuxt/nuxt/issues/15451",0.67819303,["Reactive",2988],{},["Set"],["ShallowReactive",2991],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fPRNi4LkC9GVdVUOYjbgJqQJhC98GvjXeXt7vKW-o4ko":-1},"/nuxt/ui/3130"]