` change it to `\u003CUInput :model-value=\"'12714274'\" readonly />`\r\n\r\n\r\n\r\n--------- \r\n\r\n\r\n### Version\r\n\r\nedit: v2.18.5\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-ui-uds7la?file=app.vue\r\n\r\n### Description\r\n\r\nSo i have a few grouped form inputs and noticed all values being empty since last update, reverted back to 2.18.4 and worked again. \r\n\r\n_(👀 or you can tell me im using it wrong)_\r\n\r\n### Why i am using :value= ? \r\n\r\n```\r\n\u003CUInput\r\n :value=\"firstname\"\r\n @input=\"$emit('update:firstname', $event.target.value)\"\r\n />\r\n \u003CUInput\r\n :value=\"lastname\"\r\n @input=\"$emit('update:lastname', $event.target.value)\"\r\n />\r\n```\r\n\r\nand using \r\n```\r\n\u003CAccountFormDetails\r\n v-model:firstname=\"formState.firstname\"\r\n v-model:lastname=\"formState.lastname\"\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```shell-script\r\nno logs,no errors\r\n```\r\n\r\nedit: added repro\r\nedit: pinpointed on 2.18.5, this happened between 18.4 and 18.5",[2043],{"name":2005,"color":2006},2238,"UInput :value not working in v2.18.5","2024-09-25T08:36:59Z","https://github.com/nuxt/ui/issues/2238",0.6967442,{"description":2050,"labels":2051,"number":2060,"owner":1994,"repository":1994,"state":2035,"title":2061,"updated_at":2062,"url":2063,"score":2064},"### 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).",[2052,2054,2057],{"name":1985,"color":2053},"8DEF37",{"name":2055,"color":2056},"3.x","29bc7f",{"name":2058,"color":2059},"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.6994273,{"description":2066,"labels":2067,"number":2074,"owner":1994,"repository":1995,"state":2035,"title":2075,"updated_at":2076,"url":2077,"score":2078},"### Environment\n\nBuild error on vercel.app and on local windows 10, both on build and dev.\n\n### Version\n\nv1.4.4 @nuxt/ui-pro - Saas Template\n\n### Reproduction\n\nInstall a clean saas template.\nEnable typescript check in nuxt.config\n\nTry to deploy it on vercel.\n\nAnd try to copy/paste the url in a facebook post.\n\nHere is a 100% clean saas template, without typeCheck enabled:\nhttps://stackblitz.com/~/github.com/LutherApp/codespace-project\n\n(This is a copy of my [github repo](https://github.com/LutherApp/codespace-project))\n\n### Description\n\nOn build there will be \n## errors on the \"title\"-variable\nError-msg:\nObject literal may only specify known properties, and 'title' does not exist in type 'OgImageOptions\u003C\"NuxtSeo\"> | OgImagePrebuilt'. (etc.)\n\n## \"authors\"- and \"title\"-variable in blog/index\n3 x Type 'bla bla bla' is not assignable to type 'bla bla bla'.\n1 x Property 'avatar' is optional in type 'bla bla bla' but required in type 'bla bla bla'.\n\n## Fix\nI was adding this workaround for typecheck in three or four files:\n```\n// @ts-expect-error Object literal may only specify known properties, and 'title' does not exist in type 'OgImageOptions\u003C\"NuxtSeo\"> | OgImagePrebuilt'.\n```\n\nIn blog/index.vue a was adding this lines in the template in front of `UPageBody` (in blog/index.vue):\n``` \n\u003C!--\n @vue-expect-error The variable authors throws four errors;\n 3 x Type 'bla bla bla' is not assignable to type 'bla bla bla'.\n 1 x Property 'avatar' is optional in type 'bla bla bla' but required in type 'bla bla bla'.\n -->\n```\n\n## seo info from the page missing on facebook\nThere is still noe data about the page on facebook. \n(Other nuxt-content I have made earlier have this info when I copy/paste the url to facebook.)\n\n## Any questions to this issue?\nPlease add some questions to get more info about this issues. (This was written faster than normal.)",[2068,2069,2072],{"name":2005,"color":2006},{"name":2070,"color":2071},"pro","5BD3CB",{"name":2058,"color":2073},"78bddb",2415,"og:fields in my 100% clean saas template doesn't shows on facebook, and your own public saas template don't show the og:image","2024-10-22T09:40:37Z","https://github.com/nuxt/ui/issues/2415",0.7016346,{"description":2080,"labels":2081,"number":2084,"owner":1994,"repository":1995,"state":2035,"title":2085,"updated_at":2086,"url":2087,"score":2088},"### Description\n\nI need to create custom components including @nuxt/ui components and forward props, emits on this components.\n\nWhen importing (in vue file)\n```ts\nimport type { FormFieldProps, FormFieldSlots } from '@nuxt/ui';\n\nconst props = defineProps\u003CFormFieldProps & { operations?: T[] }>();\nconst slots = defineEmits\u003CFormFieldSlots>();\n\nconst formFieldProps = reactiveOmit(props, ['operations']);\n```\nI receive this error on execution :\n```log\nIdentifier 'appConfig' has already been declared.\n\nInternal server error: Identifier 'appConfig' has already been declared. (105:6) 09:22:04\n Plugin: vite:vue\n File: .../app/pages/ResDossier/components/MyCustomComponent.vue:105:6\n at toParseError (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/parse-error.ts:95:45)\n at raise (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/tokenizer/index.ts:1497:19)\n at checkRedeclarationInScope (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/util/scope.ts:155:19)\n at declareName (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/util/scope.ts:109:12)\n at declareName (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/plugins/typescript/scope.ts:89:11)\n at declareNameFromIdentifier (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/parser/lval.ts:739:16)\n at checkIdentifier (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/parser/lval.ts:734:12)\n at checkLVal (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/parser/lval.ts:636:12)\n at parseVarId (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/parser/statement.ts:1605:10)\n at parseVarId (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/plugins/typescript/index.ts:3463:13)\n```\n\nIs there another way to import theses types ?",[2082,2083],{"name":2005,"color":2006},{"name":1988,"color":1989},3124,"how to import type xxxProps / xxxEmits / xxxSlots","2025-01-27T12:26:22Z","https://github.com/nuxt/ui/issues/3124",0.7031796,{"description":2090,"labels":2091,"number":2094,"owner":1994,"repository":1995,"state":2035,"title":2095,"updated_at":2096,"url":2097,"score":2098},"### 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_",[2092,2093],{"name":1985,"color":1986},{"name":1988,"color":1989},2941,"[Design Tokens] add `opacity` modifiers","2025-02-07T15:47:50Z","https://github.com/nuxt/ui/issues/2941",0.70332694,{"description":2100,"labels":2101,"number":2104,"owner":1994,"repository":1995,"state":2035,"title":2105,"updated_at":2106,"url":2107,"score":2108},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.11.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: bun@1.1.38\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.10, @nuxtjs/i18n@9.1.0, @nuxt/image@1.8.1\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.10\n\n### Reproduction\n\nUse the UPopover component and put a UButton in an UTooltip.\n\n### Description\n\nUPopover does not work when the UButton is in a UTooltip\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2102,2103],{"name":2005,"color":2006},{"name":1988,"color":1989},2897,"UPopover does not work when the UButton is in a UTooltip","2025-02-19T15:23:15Z","https://github.com/nuxt/ui/issues/2897",0.70627326,["Reactive",2110],{},["Set"],["ShallowReactive",2113],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"8pBMT3pvxipUlydAdNV8nT_8Dsi5Ue2NqpjS-d7zN00":-1},"/nuxt/ui/2993"]