\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```",[2886,2889,2892],{"name":2887,"color":2888},"bug","d73a4a",{"name":2890,"color":2891},"v3","49DCB8",{"name":2893,"color":2894},"triage","ffffff",3607,"ui","Background-Color for UTable","2025-03-18T15:08:25Z","https://github.com/nuxt/ui/issues/3607",0.6772176,{"description":2902,"labels":2903,"number":2909,"owner":2877,"repository":2896,"state":2878,"title":2910,"updated_at":2911,"url":2912,"score":2913},"### Description\n\nDescription:\nI am currently using the UTable component from Nuxt UI and have encountered a limitation regarding the customization of table headers. Specifically, I need to create a table with multi-row headers and the ability to merge columns using colspan. For example, the multi-row spanning column headers shown in the image.However, the current implementation of the UTable component does not seem to support this feature.\n\n\nCurrent Behavior:\n\nThe header property allows for custom content using the h function, but it is limited to single-column customization.\nThe available slots are primarily designed for single-column or specific row customization and do not support multi-column header customization.\nExpected Behavior:\n\nAbility to define headers that span multiple rows and columns.\nSupport for colspan and rowspan attributes in the header configuration to allow for more complex table layouts.\nEnhanced slot functionality to support multi-column header customization.\nUse Case:\nThis feature is essential for creating complex data tables where grouped headers are necessary for better data organization and presentation. It is particularly useful in scenarios where data needs to be categorized under broader headings.\n\nProposed Solution:\n\nIntroduce a mechanism in the UTable component to allow for multi-row and multi-column header definitions.\nProvide examples and documentation on how to implement these features using the existing API or through new enhancements.\nConsider expanding the slot functionality to support more complex header customizations.\nAdditional Context:\n\nThis feature is commonly supported in other table libraries and would greatly enhance the flexibility and usability of the UTable component in Nuxt UI.\nEnvironment:\n\nNuxt UI version: [3.0.0-alpha.12]\nNuxt version: [^3.15.4]\n\nRelated Issues Link:\nhttps://github.com/nuxt/ui/issues/1289#issuecomment-2652919275\nhttps://github.com/nuxt/ui/issues/1651\nhttps://github.com/nuxt/ui/issues/2053\n\nRelated Documentation Link:\nhttps://ui3.nuxt.dev/components/table\n\n### Additional context\n\n_No response_",[2904,2907,2908],{"name":2905,"color":2906},"enhancement","a2eeef",{"name":2890,"color":2891},{"name":2893,"color":2894},3296,"Support for Multi-Row and Colspan Headers in UTable Component","2025-02-14T09:56:42Z","https://github.com/nuxt/ui/issues/3296",0.6808519,{"description":2915,"labels":2916,"number":2921,"owner":2877,"repository":2877,"state":2922,"title":2923,"updated_at":2924,"url":2925,"score":2926},"### Describe the feature\n\nHello folks!\r\n\r\nThere is currently no specific documentation available that explains how to properly type the `error` response when using a custom `useFetch` method. \r\nWhile Nuxt provides examples on basic usage of `useFetch`, it does not clearly cover how to handle `error` typing when extending or customizing this method for specific use cases. \r\nE.g.\r\n\r\n```javascript\r\nimport type { UseFetchOptions } from 'nuxt/app'\r\nimport { FetchError } from 'ofetch'\r\nimport { useFetch, useNuxtApp } from '#imports'\r\n\r\nexport async function useCustomFetch\u003CT, E = unknown>(url: string | (() => string), options?: UseFetchOptions\u003CT>) {\r\n return useFetch\u003CT, FetchError\u003CE>>(url, {\r\n ...options,\r\n $fetch: useNuxtApp().$customFetch,\r\n })\r\n}\r\n```\r\n\r\nlooks fine, but eslint breaks and the `response` has now the type `PickFrom\u003C_ResT, KeysOf\u003CDataT>> | null` instead of the given one.\r\n\r\nIs there a good way to type the `error`, or is there a to do here?\r\n\r\nCheers\r\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).",[2917,2918],{"name":2868,"color":2869},{"name":2919,"color":2920},"good first issue","fbca04",29199,"closed","Add example on how to correctly type custom useFetch errors","2024-10-08T13:16:53Z","https://github.com/nuxt/nuxt/issues/29199",0.60287035,{"description":2928,"labels":2929,"number":2936,"owner":2877,"repository":2877,"state":2922,"title":2937,"updated_at":2938,"url":2939,"score":2940},"### 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_",[2930,2931,2934,2935],{"name":2871,"color":2872},{"name":2932,"color":2933},"3.x","29bc7f",{"name":2887,"color":2888},{"name":2874,"color":2875},14879,"`useFetch()` incorrectly typed error","2023-01-19T17:41:45Z","https://github.com/nuxt/nuxt/issues/14879",0.6321864,{"description":2942,"labels":2943,"number":2948,"owner":2877,"repository":2877,"state":2922,"title":2949,"updated_at":2950,"url":2951,"score":2952},"### Describe the feature\n\n`useFetch` now returns an error of type `Error`...\r\nI would like to suggest changing the error type if possible to `NuxtError` which returns the `CreateError` class...\r\nBecause now, as far as I know, it is impossible to override the expected error type, and typescript complains about the lack of fields\r\n`/src/pages/login.vue`\r\n```ts\r\n\tconst onSubmit = async () => {\r\n\t\tconst { data: res, error } = await useFetch\u003CIServerResponse>('/api/auth/login', {\r\n\t\t\tmethod: 'POST',\r\n\t\t\tbody: {\r\n\t\t\t\temail: email.value,\r\n\t\t\t\tpassword: pass.value,\r\n\t\t\t},\r\n\t\t});\r\n\t\tif (error.value) {\r\n\t\t\tconsole.log(error.value.data.statusMessage); // here an error of unknown `data` field\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tawait useRouter().replace('/');\r\n\t};\r\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://v3.nuxtjs.org/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[2944,2945],{"name":2932,"color":2933},{"name":2946,"color":2947},"pending triage","E99695",14810,"change type of useFetch error for better support typescript","2023-01-19T17:40:38Z","https://github.com/nuxt/nuxt/issues/14810",0.63689524,{"description":2954,"labels":2955,"number":2962,"owner":2877,"repository":2877,"state":2922,"title":2963,"updated_at":2964,"url":2965,"score":2966},"### Describe the feature\r\n\r\nWhen developing a rest API, it's considered good to use semantic status codes for different response types. So I do in my API routes:\r\n\r\n```ts\r\nimport { setResponseStatus } from 'h3'\r\n\r\nconst enum OperationResultKind {\r\n Created = 'Created',\r\n AlreadyExists = 'AlreadyExists',\r\n InvalidData = 'InvalidData',\r\n}\r\n\r\ntype OperationResult =\r\n| { kind: OperationResultKind.Created; user: User }\r\n| { kind: OperationResultKind.AlreadyExists }\r\n| { kind: OperationResultKind.InvalidData; problems: ValidationProblem[] }\r\n\r\nexport default defineEventHandler(event => {\r\n const unvalidatedData = readBody(event)\r\n const validationResult = // some validation stuff\r\n\r\n if (!validationResult.success) {\r\n setResponseStatus(event, 400)\r\n return { kind: OperationResultKind.InvalidData, problems: validationResult.problems }\r\n }\r\n\r\n const { data } = validationResult\r\n \r\n try {\r\n const insertedUser = await insertIntoDb(data)\r\n setResponseStatus(event, 203)\r\n return { kind: OperationResultKind.Created; user: insertedUser }\r\n } catch (e) {\r\n if (/* some error checking */) {\r\n setResponseStatus(event, 409)\r\n return { kind: OperationResultKind.AlreadyExists }\r\n }\r\n \r\n throw e\r\n }\r\n})\r\n```\r\n\r\nHowever, when fetching this route with `useFetch`, I end up with `InvalidData` and `AlreadyExists` errors being in the `error` ref. The thing is that these variants are some type of domain errors and I get no typings for them. The other thing is that the `data` ref is of type `OperationResult`, but it only may contain the `Created` variant so I end up using `as` to convert types which is not good. \r\n\r\nI could return only 2xx status codes to resolve this issue, but I might want to reuse this API in many different projects in the future so status codes must be semantic.\r\n\r\nI think that one option for resolving that may be adding some interceptor concept such as in Axios:\r\n```ts\r\naxios.get('/user/12345', {\r\n validateStatus: function (status) {\r\n return status \u003C 500; // Resolve only if the status code is less than 500\r\n }\r\n})\r\n```\r\n\r\nAlso one would want to use this validation interceptor globally, so it's worth adding this to `nuxt.config.ts`.\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2956,2958,2959],{"name":2905,"color":2957},"8DEF37",{"name":2932,"color":2933},{"name":2960,"color":2961},"upstream","E8A36D",18713,"Add an option to `useFetch` to not consider non-5xx status codes as errors","2023-10-22T09:04:12Z","https://github.com/nuxt/nuxt/issues/18713",0.64929265,{"description":2968,"labels":2969,"number":2971,"owner":2877,"repository":2877,"state":2922,"title":2972,"updated_at":2973,"url":2974,"score":2975},"### Describe the feature\r\n\r\nGiven a server route with handler\r\n\r\n```ts\r\n// routes/example.ts\r\nexport default defineEventHandler((event) => {\r\n if(Math.random() > 0.5){\r\n setResponseStatus(event, 500);\r\n return 'random error occurred'\r\n }\r\n return 'nonerror response'\r\n})\r\n```\r\n\r\nwhen you fetch it on client using a nuxt composable like `$fetch`, for example in a `getExample` function that could be called on a button click\r\n\r\n```ts\r\nasync function getExample() {\r\n try {\r\n // in reality can only be \"nonerror response\"\r\n const response = await $fetch('/example') // `Simplify\u003C\"random error occurred\" | \"nonerror response\">`\r\n } catch(error) {\r\n if (error instanceof FetchError) {\r\n // in reality can only be \"random error occurred\"\r\n error.data // `any`\r\n }\r\n }\r\n}\r\n```\r\n\r\nor when using `useFetch` in component `setup`\r\n\r\n```ts\r\nconst fetchResult = useFetch('/example')\r\nfetchResult.data // `globalThis.Ref\u003CSimplify\u003C\"random error occurred\" | \"nonerror response\"> | null>`\r\nfetchResult.error // `globalThis.Ref\u003CFetchError\u003Cany> | null>`\r\n``` \r\n\r\nan issue with types arises. While successful responses are technically typed correctly, in reality they can only be `nonerror response` (and error responses are just `any`). I'd like to propose a way for developers to specify on server which responses are error responses that could then augment types on client. Here's more or less what I imagine it to look like\r\n\r\n```ts\r\n// routes/example.ts\r\nexport default defineEventHandler((event) => {\r\n if(Math.random() > 0.5){\r\n setResponseStatus(event, 500);\r\n return useExplicitErrorResponse('random error occurred') // HERE\r\n }\r\n return 'nonerror response'\r\n})\r\n```\r\n\r\nOnly one line changes from the original example, an opt in way for users to specify this return path is an error response by wrapping the normal response in `useExplicitErrorResponse`. It could then be used to type the `useFetch().error` that would become `FetchError\u003C'random error occurred'>` or something similar.\r\n\r\nAdditionally, it would be nice to have this functionality in the `try catch` flow, which could look something like this\r\n\r\n```ts\r\ntry {\r\n const response = await $fetch('/example')\r\n} catch(error) {\r\n if (error instanceof FetchError) {\r\n // data would now be `'random error occurred' | undefined`\r\n const { data } = error as FetchErrorFromRoute\u003C'/example'>\r\n }\r\n}\r\n```\r\n\r\nIn the `try catch` variant I made up `FetchErrorFromRoute` that would type itself in the similar fashion the fetch composables do from passed url and return the error response types or fallback to `any` if the route didn't return anything wrapped in `useExplicitErrorResponse`.\r\n\r\nI'd be willing to help with the implementation but I'm not familiar with the codebase and I would most likely need guidance\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2970],{"name":2946,"color":2947},28136,"Add a way to distinguish between server error/nonerror responses for client types","2024-07-15T13:04:37Z","https://github.com/nuxt/nuxt/issues/28136",0.6556905,{"description":2977,"labels":2978,"number":2981,"owner":2877,"repository":2896,"state":2922,"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_",[2979,2980],{"name":2905,"color":2906},{"name":2890,"color":2891},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.65768814,{"description":2987,"labels":2988,"number":2991,"owner":2877,"repository":2877,"state":2922,"title":2992,"updated_at":2993,"url":2994,"score":2995},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v20.11.1\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: pnpm@8.5.1\r\n- Builder: -\r\n- User Config: devtools, extends, modules, runtimeConfig\r\n- Runtime Modules: @nuxt/image@1.5.0\r\n- Build Modules: -\n\n### Reproduction\n\nReproduction url: https://stackblitz.com/edit/github-um9rcm?file=composables%2FuseAppFetch.ts\n\n### Describe the bug\n\nI tried to create my custom composable using the link https://nuxt.com/docs/examples/advanced/use-custom-fetch-composable, but I encountered errors related to typing. \r\nIn useAppFetch on line 15. \r\n\r\n`No overload matches this call.\r\n Overload 1 of 2, '(request: NitroFetchRequest | Ref\u003CNitroFetchRequest> | (() => NitroFetchRequest), opts?: UseFetchOptions\u003CResT extends void ? unknown : ResT, ... 4 more ..., ResT extends void ? \"get\" : AvailableRouterMethod\u003C...>> | undefined): AsyncData\u003C...>', gave the following error.\r\n Argument of type 'UseFetchOptions\u003CResT, ResT, KeysOf\u003CResT>, null, string & {}, AvailableRouterMethod\u003Cstring & {}>>' is not assignable to parameter of type 'UseFetchOptions\u003CResT extends void ? unknown : ResT, ResT extends void ? unknown : ResT, KeysOf\u003CResT extends void ? unknown : ResT>, null, NitroFetchRequest, ResT extends void ? \"get\" : AvailableRouterMethod\u003C...>>'.\r\n Type 'ResT extends void ? unknown : ResT' is not assignable to type 'ResT'.\r\n 'ResT' could be instantiated with an arbitrary type which could be unrelated to 'ResT extends void ? unknown : ResT'.\r\n Overload 2 of 2, '(request: NitroFetchRequest | Ref\u003CNitroFetchRequest> | (() => NitroFetchRequest), opts?: UseFetchOptions\u003CResT extends void ? unknown : ResT, ... 4 more ..., ResT extends void ? \"get\" : AvailableRouterMethod\u003C...>> | undefined): AsyncData\u003C...>', gave the following error.\r\n Argument of type 'UseFetchOptions\u003CResT, ResT, KeysOf\u003CResT>, null, string & {}, AvailableRouterMethod\u003Cstring & {}>>' is not assignable to parameter of type 'UseFetchOptions\u003CResT extends void ? unknown : ResT, ResT extends void ? unknown : ResT, KeysOf\u003CResT extends void ? unknown : ResT>, ResT extends void ? unknown : ResT, NitroFetchRequest, ResT extends void ? \"get\" : AvailableRouterMethod\u003C...>>'.\r\n Type 'ResT extends void ? unknown : ResT' is not assignable to type 'ResT'.\r\n 'ResT' could be instantiated with an arbitrary type which could be unrelated to 'ResT extends void ? unknown : ResT'.(2769)`\r\n\r\n\u003Cimg width=\"685\" alt=\"Screenshot 2024-05-10 at 11 36 59\" src=\"https://github.com/nuxt/nuxt/assets/159756578/f13be891-2199-47f5-bb81-4d79ba6b3e8b\">\r\n\r\n\r\nAlso in app.vue line 5 type error related to 'transform'. But for some reason in stackblitz.com error in app.vue is not displayed. If you copy whole code to VScode it show error.\r\n\r\n`Type '(res: Todo[]) => string[]' is not assignable to type '_Transform\u003CTodo[], Todo[]>'.\r\n Type 'string[]' is not assignable to type 'Todo[] | Promise\u003CTodo[]>'.ts(2322)`\r\n\r\n\u003Cimg width=\"734\" alt=\"Screenshot 2024-05-10 at 11 35 18\" src=\"https://github.com/nuxt/nuxt/assets/159756578/2d9e59cf-93d2-4dfa-bcf5-a8fe1501127c\">\r\n\r\nIt returns transformed value as expected.\r\n\r\nThanks in advance for helping.\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2989,2990],{"name":2932,"color":2933},{"name":2946,"color":2947},27142,"Custom useFetch type error","2024-05-12T07:37:52Z","https://github.com/nuxt/nuxt/issues/27142",0.66114926,["Reactive",2997],{},["Set"],["ShallowReactive",3000],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f5enU6P60PkaazMR5221_vsePQ1Afb9MY_11W2I5qTYA":-1},"/nuxt/ui/2436"]