\n USEERROR() RETURNED: {{ error?.message || \"nothing at all\" }} // ERRORED\n \u003C/p>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst error = useError();\nconsole.log(`Error`, error); // `error` object also don't contain the `message` that returned in API with `createError`\n\u003C/script>\n\nOutput: \n```bash\nEXPECTED ERROR MESSAGE TO RECEIVE: cats are cool\nUSEERROR() RETURNED: Server Error\n```\n\n```\n\nWorking workaround for now (althought it feels messy)\n\nthrow a `data` in server:\n```vue\n throw createError({\n statusCode: 401,\n data: {\n error: \"cats are cool\",\n },\n });\n```\n\nin client: `error.value.data?.message;`\n\n\nBut in error.vue, there is no way to access this custom data:\nin some page:\n```js\n throw createError({\n statusCode: error.value.statusCode,\n message: error.value.data?.message,\n });\n```\n\ni am exactly sending 'message' (same if i send statusMessage instead btw) and it is literally impossible to receive this back in error.vue page with useError:\n\nerror.vue\n```vue\nconst error = useError();\nconsole.log(`Error that received`, error); \n```\n\noutput:\n```bash\n_value: Object { error: \"true\", url: \"/go_error\", statusCode: 401, … }\n\nerror: \"true\"\n\nmessage: \"Server Error\"\n\nstack: \"\\nat createError (C:/Users/arshh/Desktop/nuxt-error-/node_modules/h3/dist/index.mjs:71:15)\\nat createError (C:/Users/arshh/Desktop/nuxt-error-/node_modules/nuxt/dist/app/composables/error.js:42:58)\\nat setup (C:/Users/arshh/Desktop/nuxt-error-/app/pages/go_error.vue:20:50)\"\n\nstatusCode: 401\n\nstatusMessage: \"Server Error\" (SAME IF I USE THE STATUSMESSAGE INSTEAD)\n\nurl: \"/go_error\"\n```\n\n\nso for some reason, the `message` that i sent via API with `createError` is being ignored, and overridden by `statusMessage` instead. This is huge headache for may developers i am sure about that, very confusing error. \n\n\n### Additional context\n\nIssue is not only createError, but also useError composable. There is huge inconsistency, variables being overridden, deleted and even being not exists at all. I wish there were easier way to handle errors!\n\n### Logs\n\n```shell-script\nhttps://ibb.co/H3v8MRd\n```",[3182],{"name":3183,"color":3184},"pending triage","E99695",33045,"Can't use the `message` sent by API with `createError` in client.","2025-08-22T22:25:08Z","https://github.com/nuxt/nuxt/issues/33045",0.791871,{"description":3191,"labels":3192,"number":3199,"owner":3144,"repository":3200,"state":3201,"title":3202,"updated_at":3203,"url":3204,"score":3205},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.9.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.11, @vueuse/nuxt@10.11.1, @nuxtjs/mdc@0.6.1, @formkit/auto-animate/nuxt@0.8.2, @vite-pwa/nuxt@0.10.5\n- Build Modules: -\n------------------------------\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.11\n\n### Reproduction\n\nhttps://github.com/user-attachments/assets/ccb59d22-36d8-46b0-a773-aa4ff38c26ce\n\n### Description\n\nWhen I use the select component and use the trailing slot and add a button, the button click does not work\n\n```\u003CUFormField label=\"Sustento Tributario\">\n \u003CUSelect\n v-model=\"formDetailRT.codeSustento\"\n label-key=\"shortName\" value-key=\"code\"\n :items=\"typeSustentoInv\"\n :ui=\"{ trailing: 'p-0' }\"\n class=\"max-w-[280px]\"\n >\n \u003Ctemplate #trailing>\n \u003CUButton\n color=\"primary\"\n size=\"sm\"\n icon=\"i-carbon-add-large\"\n @click=\"addToRetention\"\n />\n \u003C/template>\n \u003C/USelect>\n \u003C/UFormField>```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3193,3196],{"name":3194,"color":3195},"bug","d73a4a",{"name":3197,"color":3198},"v3","49DCB8",3148,"ui","closed","V3 In Select slot trailing","2025-01-25T13:13:41Z","https://github.com/nuxt/ui/issues/3148",0.6883046,{"description":3207,"labels":3208,"number":3212,"owner":3144,"repository":3200,"state":3201,"title":3213,"updated_at":3214,"url":3215,"score":3216},"### Description\n\ncan you add Scroll-area component ? like the one in shadcn \"https://ui.shadcn.com/docs/components/scroll-area\"\n\n### Additional context\n\n_No response_",[3209,3211],{"name":3166,"color":3210},"a2eeef",{"name":3197,"color":3198},3425,"Scroll-area","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3425",0.73288035,{"description":3218,"labels":3219,"number":3224,"owner":3144,"repository":3144,"state":3201,"title":3225,"updated_at":3226,"url":3227,"score":3228},"### Describe the feature\n\nWhen you are behind a reverse proxy that handles HTTPS for you, there should be a way to have a different protocol on the server and on the client for HMR websockets.\r\n\r\nWe already have \"clientPort\", so you can have a different port on the server and in the client.\r\n\r\nThe feature would be a \"clientProtocol\" option, so the server can use \"ws://\" while the client uses \"wss://\".\r\n\r\nUsage:\r\n```javascript\r\n{\r\n vite: {\r\n server: {\r\n hmr: {\r\n protocol: \"wss\",\r\n clientProtocol: \"ws\",\r\n },\r\n },\r\n },\r\n}\r\n```\r\n\r\nThis could also be a solution for issue nuxt/nuxt.js#12003\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).",[3220,3223],{"name":3221,"color":3222},"3.x","29bc7f",{"name":3183,"color":3184},12408,"Add \"clientProtocol\" option to HMR config","2023-01-19T16:18:48Z","https://github.com/nuxt/nuxt/issues/12408",0.75678205,{"description":3230,"labels":3231,"number":3234,"owner":3144,"repository":3200,"state":3201,"title":3235,"updated_at":3236,"url":3237,"score":3238},"### Description\n\nThis is highly experimental and potentially canceled, I'm opening this issue to both track down best approach and naming conventions before working on a PR. **I'll update this issue as I work on it**\n\n## Idea\n\nWith the current [Design Tokens](https://ui3.nuxt.dev/getting-started/theme#tokens) we control colors, radius and container width. This greatly simplifies both prototyping process and agencies working on templates built with Nuxt UI.\nPersonally there is one missing feature about colors: their opacity/shades, that you can find in the various states and variants.\n\nTaking in example any variant for the `Button` component, we have a set of hardcoded opacities (in this case: `/25`, `/10` and `/15`):\nhttps://github.com/nuxt/ui/blob/7f64198a70104436f39f2f9d8527df0508fd84f6/src/theme/button.ts#L91-L95\n\nIn a design first approach, especially when working on bigger projects, it is often to have the brand colors pre-defined for things like hover, disabled and such. This means that, if the project requires them, you are most probably forced to edit each very component's color in the `app.config`.\n\n### What we have\n\nWe auto generate a series of css variables as `--ui-{color}` based on `ui.theme.colors` inside the `nuxt.config.ts`. Then use them as `(text/bg/ring)-[var(--ui-{color})]/{opacity}` both as base and with modifiers (hover, disabled and so on).\n\nThey are used 40 times in total (7 unique: `/10`, `/15`, `/20`, `/25`, `/50`, `/75` and `/90`), distributed as:\n- **24** on `--ui-{color}`\n - ...\n- **7** on `--ui-bg-elevated`\n - `/50` for bg, hover and `data-highlighted`\n- **4** on `--ui-bg-accented`\n - `/75` for hover\n- **3** on `--ui-bg`\n - `/75` for pinned and sticky in UTable\n- **2** on `--ui-bg-inverted`\n - `/20` for `data-[highlighted]`\n - `/90` for hover\n\n### My approach\n\nI would like to group the various opacities into two categories: those that are actual opacities (mainly for `--ui-bg*`) and those that are for colors.\n- for the background ones I would mostly group them as three type of opacities (potentially creating three named variants)\n- for colors I would simply replace them with another named css variable, with follows the naming convention of `--ui-bg-(elevated/inverted/accented/*)`, becoming something like `--ui-{color}-(elevated/inverted/accented/*)`. For its default value I would use `color-mix(oklab, var(--ui-{color}) {opacity});`, keeping the current functionality of requiring a single starting color.\n\n### Additional context\n\n_No response_",[3232,3233],{"name":3166,"color":3210},{"name":3197,"color":3198},2941,"[Design Tokens] add `opacity` modifiers","2025-02-07T15:47:50Z","https://github.com/nuxt/ui/issues/2941",0.76891154,{"description":3240,"labels":3241,"number":3242,"owner":3144,"repository":3243,"state":3201,"title":3244,"updated_at":3245,"url":3246,"score":3247},"## Issue\nIn dev mode contributor images are not rendered as expected on landing page:\n\n\n\n\n## Repro\n1. Run `pnpm dev`\n2. Browse to `http://localhost:3000/` and scroll down to **Built by developers...**\n\n## Root cause\n`nuxt.config.ts` is missing config `$development.image.ipx.baseURL`.",[],1785,"nuxt.com","contributor images on landing page not rendered as expected in dev mode","2025-03-21T16:12:54Z","https://github.com/nuxt/nuxt.com/issues/1785",0.7695929,{"description":3249,"labels":3250,"number":3253,"owner":3144,"repository":3200,"state":3201,"title":3254,"updated_at":3214,"url":3255,"score":3256},"### Environment\n\nHi, I just wanted to share that the styling on the docs website appears broken when viewed in Firefox. I checked on Chrome, and it displays correctly there.\n\nHere’s a screenshot:\n\n\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nN/A\n\n### Reproduction\n\nN/A\n\n### Description\n\nN/A\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3251,3252],{"name":3194,"color":3195},{"name":3197,"color":3198},3397,"Nuxt UI v3 docs styling broken","https://github.com/nuxt/ui/issues/3397",0.77166307,["Reactive",3258],{},["Set"],["ShallowReactive",3261],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fYe4RO8fesqX5-KnKecG0B3XkDeMTw9bb51xeH_vztbE":-1},"/nuxt/ui/2861"]