\r\n \u003C/UFormGroup>\r\n \u003C/UForm>\r\n\u003C/template>\r\n```\r\n\r\n\u003Cimg width=\"1239\" alt=\"chrome\" src=\"https://github.com/user-attachments/assets/750c2b77-79a2-4aa1-b29c-1fd36db0cfa0\">\r\n\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_",[2880],{"name":2881,"color":2882},"bug","d73a4a",2126,"ui","closed","Chrome: Label 'for' attribute mismatch with form field IDs in URadioGroup","2024-09-06T16:59:18Z","https://github.com/nuxt/ui/issues/2126",0.66268665,{"description":2891,"labels":2892,"number":2902,"owner":2871,"repository":2871,"state":2885,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### Describe the feature\n\nI'm seeing errors in a live system that suggest this scenario. Suppose you're on mobile with an unreliable network connection. You'll see problems that may result in you ending up on the error page. \r\n\r\nBut Nuxt has this:\r\n\r\n`const ErrorComponent = defineAsyncComponent(() => import('#build/error-component.mjs').then(r => r.default || r))`\r\n\r\nBecause `ErrorComponent` is async, the load of that may fail too.\r\n\r\nIs there / could there be a way to force `ErrorComponent` to be included in the initial bundle so that it is always available?\r\n\n\n### Additional information\n\n- [X] 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).",[2893,2896,2899],{"name":2894,"color":2895},"enhancement","8DEF37",{"name":2897,"color":2898},"good first issue","fbca04",{"name":2900,"color":2901},"3.x","29bc7f",20996,"Force ErrorComponent not to be async?","2023-06-10T17:10:36Z","https://github.com/nuxt/nuxt/issues/20996",0.69731545,{"description":2908,"labels":2909,"number":2911,"owner":2871,"repository":2871,"state":2885,"title":2912,"updated_at":2913,"url":2914,"score":2915},"### 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).",[2910],{"name":2868,"color":2869},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.7111329,{"description":2917,"labels":2918,"number":2920,"owner":2871,"repository":2871,"state":2885,"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```",[2919],{"name":2868,"color":2869},30917,"fetchData causes onErrorCaptured to be unable to capture errors","2025-02-22T20:46:13Z","https://github.com/nuxt/nuxt/issues/30917",0.7111765,{"labels":2926,"number":2934,"owner":2871,"repository":2871,"state":2885,"title":2935,"updated_at":2936,"url":2937,"score":2938},[2927,2928,2931],{"name":2894,"color":2895},{"name":2929,"color":2930},"workaround available","11376d",{"name":2932,"color":2933},"2.x","d4c5f9",10227,"Should have $fetchState.success","2023-02-15T00:25:12Z","https://github.com/nuxt/nuxt/issues/10227",0.71769696,{"description":2940,"labels":2941,"number":2946,"owner":2871,"repository":2884,"state":2885,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### Environment\n\n```\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.11.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: bun@1.2.2\n- Builder: -\n- User Config: future, compatibilityDate, modules, css, experimental, runtimeConfig, routeRules, i18n, icon\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.12, @nuxt/image@1.9.0, @nuxtjs/i18n@9.2.0, @vueuse/nuxt@12.5.0\n- Build Modules: -\n------------------------------\n```\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3, latest commit\n\n### Reproduction\n\nhttps://ui3.nuxt.dev/components/navigation-menu\n\n### Description\n\nThe items (`\u003Cli>`) of NavigationMenu have unnecessary padding top and bottom.\n\nIs:\n\u003Cimg width=\"691\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/cdb9a3e5-3429-4883-aa4a-c8e7859356f0\" />\n\nShould:\n\u003Cimg width=\"694\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/155b8a32-2e58-44b0-becf-7646c39e40f7\" />\n\nOtherwise this leads to unexpected whitespaces. E.g. the following has class `mt-0` but still shows a significant margin:\n\u003Cimg width=\"316\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/af76a978-85cd-4ed4-9269-8dfca3c9686d\" />\n\n### Additional context\n\nTabs doesnt have this:\n\u003Cimg width=\"1040\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/f5849972-7c7b-421a-9f9c-03d0a73f5572\" />",[2942,2943],{"name":2881,"color":2882},{"name":2944,"color":2945},"v3","49DCB8",3328,"NavigationMenu container is too high, creates whitespace","2025-03-28T17:38:47Z","https://github.com/nuxt/ui/issues/3328",0.7240986,{"description":2952,"labels":2953,"number":2964,"owner":2871,"repository":2871,"state":2885,"title":2965,"updated_at":2966,"url":2967,"score":2968},"### Describe the feature\n\nWhen loading data manually with the `useAsyncData` composables it would be useful for the refresh/execute throw an error if the refresh was cancelled/deduped and only finish the promise when the request is actually completed, it would be also useful to complete the promise and return the new data.\r\nThanks.\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).",[2954,2955,2958,2961],{"name":2894,"color":2895},{"name":2956,"color":2957},"discussion","538de2",{"name":2959,"color":2960},"⚠️ breaking change","D746A6",{"name":2962,"color":2963},"4.x","3B01A5",29112,"`useAsyncData` reject promise `refresh`","2025-03-24T19:57:43Z","https://github.com/nuxt/nuxt/issues/29112",0.7248739,{"description":2970,"labels":2971,"number":2974,"owner":2871,"repository":2871,"state":2885,"title":2975,"updated_at":2976,"url":2977,"score":2978},"If any error occurs inside component's `data()` an ugly and unhanded SSR error occurs like this:\r\n\r\nTypeError: Converting circular structure to JSON\r\n\r\n\r\nAlso trying to handle errors in every single page seems so extra work and not possible always consider my dashboard's data :\r\n```js\r\nasync data({redirect, error}){\r\n try {\r\n let {stats} = await $http.get('admin/dashboard');\r\n return { stats: stats }\r\n } catch {\r\n error({message:'Something bad happened!'}); \r\n return {stats: {} }\r\n }\r\n },\r\n``` \r\n\r\n**Suggestion:** Why we don't simply catch all returned promises in data and passing proper error object to user land?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c112\">#c112\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2972,2973],{"name":2894,"color":2895},{"name":2932,"color":2933},134,"[Enhancement] Handle data() promise errors","2023-01-18T15:38:30Z","https://github.com/nuxt/nuxt/issues/134",0.7252401,{"description":2980,"labels":2981,"number":2984,"owner":2871,"repository":2871,"state":2885,"title":2985,"updated_at":2986,"url":2987,"score":2988},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v22.1.0`\r\n- Nuxt Version: `3.12.2`\r\n- CLI Version: `3.12.0`\r\n- Nitro Version: `2.9.6`\r\n- Package Manager: `pnpm@9.1.1`\r\n- Builder: `-`\r\n- User Config: `devtools`, `modules`\r\n- Runtime Modules: `@nuxt/eslint@0.3.13`\r\n- Build Modules: `-`\n\n### Reproduction\n\nGithub: https://github.com/MikeBellika/Async-data-error-reproduction\r\nStackblitz: https://stackblitz.com/~/github.com/MikeBellika/Async-data-error-reproduction\r\n\r\nAfter running the project, head to `/client` and `/server`. On `/client`, the error is blank, while it is `This is a human readable error` on `/server`.\n\n### Describe the bug\n\nWe wrap `useAsyncData` in another function, to provide error handling. The function looks something like this:\r\n```typescript\r\n async function myAsyncData\u003CT>(...args: AsyncArgs\u003CT>) {\r\n const { error, ...rest } = await useAsyncData\u003CT>(...args);\r\n return { error: humanReadableError(error.value), ...rest };\r\n }\r\n```\r\nHowever when we run this on the client, for example with `{server: false}`, `error.value` is null. If we just do `return {error, ...rest }`, we can get the error from the template.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2982,2983],{"name":2900,"color":2901},{"name":2868,"color":2869},27855,"`error.value` is undefined in composable when using `useAsyncData` on client","2024-06-27T14:28:40Z","https://github.com/nuxt/nuxt/issues/27855",0.7272712,["Reactive",2990],{},["Set"],["ShallowReactive",2993],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fmEPOOTnYHpG-HhpOL6H02XUFmsmEdkLKAu8yOtXlB9I":-1},"/nuxt/nuxt.com/675"]