` 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",[3029],{"name":3030,"color":3031},"bug","d73a4a",2238,"ui","closed","UInput :value not working in v2.18.5","2024-09-25T08:36:59Z","https://github.com/nuxt/ui/issues/2238",0.50274444,{"description":3040,"labels":3041,"number":3049,"owner":3019,"repository":3033,"state":3034,"title":3050,"updated_at":3051,"url":3052,"score":3053},"### 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.)",[3042,3043,3046],{"name":3030,"color":3031},{"name":3044,"color":3045},"pro","5BD3CB",{"name":3047,"color":3048},"upstream","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.5168035,{"description":3055,"labels":3056,"number":3061,"owner":3019,"repository":3033,"state":3034,"title":3062,"updated_at":3063,"url":3064,"score":3065},"### 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 ?",[3057,3058],{"name":3030,"color":3031},{"name":3059,"color":3060},"v3","49DCB8",3124,"how to import type xxxProps / xxxEmits / xxxSlots","2025-01-27T12:26:22Z","https://github.com/nuxt/ui/issues/3124",0.53796166,{"description":3067,"labels":3068,"number":3069,"owner":3019,"repository":3070,"state":3034,"title":3071,"updated_at":3072,"url":3073,"score":3074},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.22.5`\n- Nitro Version: `2.11.5`\n- Package Manager: `bun@1.2.4`\n- Builder: `-`\n- User Config: `runtimeConfig`, `modules`, `app`, `site`, `sitemap`, `robots`, `css`, `icon`, `image`, `ui`, `devtools`, `future`, `unhead`, `compatibilityDate`\n- Runtime Modules: `@nuxt/ui@3.0.0-beta.3`, `@pinia/nuxt@0.10.1`, `@nuxt/scripts@0.10.5`, `@nuxt/image@1.9.0`, `@nuxtjs/seo@2.2.0`\n- Build Modules: `-`\n\n### Reproduction\n\nnda\n\n### Describe the bug\n\nnr dev\n$ nuxt dev\nNuxt 3.16.0 with Nitro 2.11.5 nuxi 8:23:08 PM\n 8:23:08 PM\n ➜ Local: http://localhost:3003/\n ➜ Network: use --host to expose\n\n ➜ DevTools: press Shift + Option + D in the browser (v2.2.1) 8:23:10 PM\n\n\n✔ Nuxt Icon loaded local collection elfi with 70 icons 8:23:10 PM\nℹ Running with compatibility version 4 nuxt 8:23:10 PM\n✔ Vite client built in 190ms 8:23:11 PM\n✔ Vite server built in 528ms 8:23:12 PM\n\n[nitro 8:23:14 PM] ERROR Error: Could not load /\u003Cmy-path>/node_modules/unenv/dist/runtime/runtime/mock/empty.mjs (imported by node_modules/nuxt-og-image/dist/runtime/server/og-image/satori/instances.js): ENOENT: no such file or directory, open '/\u003Cmy-path>/node_modules/unenv/dist/runtime/runtime/mock/empty.mjs'\n\n\nundefined\n\n### Additional context\n\nUpgraded by \"nuxi upgrade -f\" from 3.15.4 and couldn't able to start properly with provided error.\nTried with unhead flag in nuxt.config - same error\n```\nunhead: {\n legacy: true,\n }\n```\n\n### Logs\n\n```shell-script\n\n```",[],414,"scripts","Nuxt 3.16.0 won't start properly nor dev nor build","2025-03-07T18:58:03Z","https://github.com/nuxt/scripts/issues/414",0.59720516,{"description":3076,"labels":3077,"number":3082,"owner":3019,"repository":3033,"state":3034,"title":3083,"updated_at":3084,"url":3085,"score":3086},"### 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_",[3078,3081],{"name":3079,"color":3080},"enhancement","a2eeef",{"name":3059,"color":3060},2941,"[Design Tokens] add `opacity` modifiers","2025-02-07T15:47:50Z","https://github.com/nuxt/ui/issues/2941",0.60797876,{"description":3088,"labels":3089,"number":3092,"owner":3019,"repository":3033,"state":3034,"title":3093,"updated_at":3094,"url":3095,"score":3096},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.10.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: yarn@4.5.0\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.x\n\n### Reproduction\n\n```vue\n\u003Ctemplate>\n\u003CUDropdownMenu :items=\"items\">\n \u003CUAvatar\n :src=\"profilePicture\"\n size=\"lg\"\n />\n\u003C/UDropdownMenu>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst profilePicture = ref('/this/image/does/not/exist.jpg')\nconst items = [\n[{\n\tlabel: 'Logout',\n\ticon: 'i-lucide-log-out',\n}]\n]\n\u003C/script>\n```\n\n### Description\n\nWhen the `src` of the image in `UAvatar` fails to get resolved for any reason (non-existent resource, network error, refused connection from the requested host, etc), it no longer triggers the expansion of the `UDropdownMenu`. \n\nNote that this might also affect `UPopover`, but I have not tested it yet. I will be able to test it later today.\n\nP.S. @benjamincanac this was the reason I initially included it in the migration guide, because I did not know it only happens on non-resolved images\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3090,3091],{"name":3030,"color":3031},{"name":3059,"color":3060},2923,"`UAvatar` with non-resolved `src` fails to trigger `UDropdownMenu`","2025-01-25T13:12:33Z","https://github.com/nuxt/ui/issues/2923",0.60938376,{"description":3098,"labels":3099,"number":3105,"owner":3019,"repository":3033,"state":3034,"title":3106,"updated_at":3107,"url":3108,"score":3109},"### Description\n\nHello, \n\nI was looking for adding Català language to nuxt ui v3. However, i am not used to pull requests but also, the 'ca' code may be confusing with Canada one (and may be others?)\n\nCan someone help me on that way so I will be able to use the locale in the UApp componente :) ?\n\nThank you very much ! \n\n```\n\nimport { defineLocale } from '../composables/defineLocale'\n\nexport default defineLocale({\n name: 'Català',\n code: 'ca',\n messages: {\n inputMenu: {\n noMatch: 'No hi ha dades coincidents',\n noData: 'Sense dades',\n create: 'Crear \"{label}\"'\n },\n calendar: {\n prevYear: 'Any anterior',\n nextYear: 'Any següent',\n prevMonth: 'Mes anterior',\n nextMonth: 'Mes següent'\n },\n inputNumber: {\n increment: 'Incrementar',\n decrement: 'Decrementar'\n },\n commandPalette: {\n placeholder: 'Escriu una ordre o cerca...',\n noMatch: 'No hi ha dades coincidents',\n noData: 'Sense dades',\n close: 'Tancar'\n },\n selectMenu: {\n noMatch: 'No hi ha dades coincidents',\n noData: 'Sense dades',\n create: 'Crear \"{label}\"',\n search: 'Cerca...'\n },\n toast: {\n close: 'Tancar'\n },\n carousel: {\n prev: 'Anterior',\n next: 'Següent',\n goto: 'Anar a la diapositiva {slide}'\n },\n modal: {\n close: 'Tancar'\n },\n slideover: {\n close: 'Tancar'\n },\n alert: {\n close: 'Tancar'\n },\n table: {\n noData: 'Sense dades'\n }\n }\n})\n\n```\n\n### Additional context\n\n_No response_",[3100,3101,3102],{"name":3079,"color":3080},{"name":3059,"color":3060},{"name":3103,"color":3104},"triage","ffffff",3477,"Adding Català language","2025-03-20T14:09:46Z","https://github.com/nuxt/ui/issues/3477",0.6117844,{"description":3111,"labels":3112,"number":3119,"owner":3019,"repository":3033,"state":3034,"title":3120,"updated_at":3121,"url":3122,"score":3123},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.18.1\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: devtools, typescript, css, compatibilityDate, devServer, vite, runtimeConfig, app, ui, modules\n- Runtime Modules: @nuxt/ui@3.0.1, @pinia/nuxt@0.10.1, pinia-plugin-persistedstate/nuxt@4.2.0\n- Build Modules: -\n- Typescript: 5.8.2\n- Vue-tsc: 2.2.8\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.1\n\n### Reproduction\n\n```\n// will trigger typescript error on v-model\n\u003CUSelectMenu\n v-model=\"memberForm.user\"\n :items=\"addableUsers\"\n label-key=\"email\"\n/>\n// will trigger typescript error on v-model\n\u003CUSelectMenu\n v-model=\"memberForm.user\"\n :items=\"addableUsers\"\n label-key=\"email\"\n :value-key=\"undefined\"\n/>\n// will work but i need to handle label display manually using slot\n\u003CUSelectMenu\n v-model=\"memberForm.user\"\n :items=\"addableUsers\"\n/>\n```\n\n### Description\n\nI'm currently migrate my project to NuxtUi V3 and I have some issues with `\u003CUInputMenu />` and `\u003CUSelectMenu />`. On my selects I want to retrieve the full object selected so I don't set `value-key` but for display purpose I use the `label-key` props, however when I do this I get this typescript error on the `v-model` :\n```\nUnable to assign type 'User | undefined' to type 'string | undefined'.\nUnable to assign type 'User' to type 'string'. ts-plugin(2322)\n```\nAfter some research, I think the `label-key` alter the `value-key` type and that's what triggers the error.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3113,3114,3115,3118],{"name":3030,"color":3031},{"name":3059,"color":3060},{"name":3116,"color":3117},"typescript","3A629E",{"name":3103,"color":3104},3670,"v-model typescript error when using label-key InputMenu/SelectMenu","2025-03-24T20:38:15Z","https://github.com/nuxt/ui/issues/3670",0.62695956,{"description":3125,"labels":3126,"number":3129,"owner":3019,"repository":3033,"state":3034,"title":3130,"updated_at":3131,"url":3132,"score":3133},"### Description\n\nHey!\n\nIt would be nice to have the primary/secondary/neutral/etc colours defined in `app.config.ts` directly as tailwind variables (ex: text-primary-500)\n\nRight now we have to define the colours both in `app.config.ts` and `tailwind.config.js` to be able to do that. (the new `main.css` would require to create a variable for each sub-colour manually so not worth using it) \n\nFor `neutral`, since it's a tailwind colour, it could be named `text-neutr-500`\nOr maybe name all colours with something like `text-Uneutral-500`\n\n\n### Additional context\n\n_No response_",[3127,3128],{"name":3079,"color":3080},{"name":3059,"color":3060},2948,"Add theme colors as tailwind variables","2025-02-06T16:29:04Z","https://github.com/nuxt/ui/issues/2948",0.6403315,["Reactive",3135],{},["Set"],["ShallowReactive",3138],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fyVXgnotK0z9FoAxhPzHaq8rcuHyKbgCqrSL8pDBnElE":-1},"/nuxt/nuxt.com/1457"]