\n\u003C/template>\n```\n\nI think created items should emit `change` so we can validate them properly.\n\nAdditionally, because of https://github.com/nuxt/ui/issues/3736,the field always starts in an error state when a new item is created in certain conditions (regardless of whether the item meets the schema's requirements or not).\n\n------\n\nCurrent workaround is to run the validation manaully on a field after mutating the model:\n\n```ts\nasync function onCreate(item: string) {\n selected.value = item\n\n await formRef.value?.validate({ name: 'fieldName' })\n}\n```",[3174,3177],{"name":3175,"color":3176},"enhancement","a2eeef",{"name":3178,"color":3179},"v3","49DCB8",4139,"nuxt","ui","open","USelectMenu should emit 'change' after creating an item","2025-05-13T09:15:02Z","https://github.com/nuxt/ui/issues/4139",0.75899965,{"description":3189,"labels":3190,"number":3194,"owner":3181,"repository":3181,"state":3183,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### Describe the feature\n\nI was wondering about the different behavior of `ref()` in a composables file outside of composable function versus the usage in vue component, composable function or pinia for example.\r\n\r\nThe best practice documented here https://nuxt.com/docs/getting-started/state-management which describes `const ref = () => useState(\"key\", () => \"initValue\")` is nice but could be smarter without the additional step to execute this function if i want to use the underlaying ref value.\r\n\r\nuseUseStateSampleComposable.ts - Showcase for the laborious usage of `useState()`\r\n```js\r\nconst useStateFn = () => useState(\"key\", () => \"initValue\");\r\n\r\nexport function useRefSampleComposable(newRefValue: string) {\r\n const refValue = useStateFn() // i hate this additional call\r\n refValue.value = newRefValue;\r\n \r\n return {\r\n refValue\r\n };\r\n}\r\n```\r\n\r\nSo i've built something like this to get an easy workaround where i do not have to execute a function to get the underlaying ref value.\r\n\r\nuseBetterRef.ts - Example solution for doing a \"better ref\".\r\n```js\r\nconst counter = useState(\"useRefCounter\", () => 0); // just for having a unqiue counter id\r\n\r\nexport function useBetterRef(value: string) {\r\n const key = `useRef:${counter.value++}`;\r\n return computed({\r\n get: () => (() => useState(key, () => value))().value,\r\n set: (value) => (useState(key).value = value),\r\n });\r\n}\r\n```\r\n\r\nuseBetterRefSampleComposable.ts - Showcase for the usage of useBetterRef\r\n```js\r\nconst refValue = useBetterRef(\"initValue\");\r\n\r\nexport function useBetterRefSampleComposable(newRefValue: string) {\r\n refValue.value = newRefValue;\r\n \r\n return {\r\n refValue\r\n };\r\n}\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).",[3191],{"name":3192,"color":3193},"pending triage","E99695",25911,"ref vs. useState in composables file outside of composable function","2024-06-30T11:05:40Z","https://github.com/nuxt/nuxt/issues/25911",0.7593187,{"description":3200,"labels":3201,"number":3202,"owner":3181,"repository":3203,"state":3204,"title":3205,"updated_at":3206,"url":3207,"score":3208},"Create a new project and run `pnpm dev`. Got these errors. And I'm in China.\n```\nWARN Could not fetch from https://fonts.google.com/metadata/fonts. Will retry in 1000ms. 3 retries left. 18:20:09 \n\n\n[18:20:09] WARN Could not fetch from https://fonts.google.com/metadata/icons?key=material_symbols&incomplete=true. Will retry in 1000ms. 3 retries \nleft.\n\n\n WARN Could not fetch from https://fonts.google.com/metadata/fonts. Will retry in 1000ms. 2 retries left. 18:20:20 \n\n\n[18:20:20] WARN Could not fetch from https://fonts.google.com/metadata/icons?key=material_symbols&incomplete=true. Will retry in 1000ms. 2 retries \nleft.\n\n\n WARN Could not fetch from https://fonts.google.com/metadata/fonts. Will retry in 1000ms. 1 retries left. 18:20:31 \n\n\n[18:20:31] WARN Could not fetch from https://fonts.google.com/metadata/icons?key=material_symbols&incomplete=true. Will retry in 1000ms. 1 retries \nleft.\n\n\n ERROR Could not initialize provider google. unifont will not be able to process fonts provided by this provider. fetch failed 18:20:42 \n\n at node:internal/deps/undici/undici:12625:11\n at processTicksAndRejections (node:internal/process/task_queues:95:5)\n at runNextTicks (node:internal/process/task_queues:64:3)\n at process.processImmediate (node:internal/timers:447:9)\n at process.callbackTrampoline (node:internal/async_hooks:128:17)\n at async Object.getItem (xxx/node_modules/.pnpm/unifont@0.1.7/node_modules/unifont/dist/index.js:29:20)\n```",[],582,"fonts","closed","Could not fetch from https://fonts.google.com/metadata/fonts.","2025-04-02T02:41:47Z","https://github.com/nuxt/fonts/issues/582",0.46948647,{"description":3210,"labels":3211,"number":3221,"owner":3181,"repository":3222,"state":3204,"title":3223,"updated_at":3224,"url":3225,"score":3226},"It would be preferable that the module use the protocol that is specified in either the vitest config or nuxt config.\r\n\r\nhttps://github.com/danielroe/nuxt-vitest/blob/178c11865380b0cadb4c4af196486ebba308d3a9/packages/nuxt-vitest/src/module.ts#L49\r\n\r\nThis is resulting in the dev tools being unable to show the proper page for the ui:\r\n\r\n\r\n",[3212,3215,3218],{"name":3213,"color":3214},"bug","d73a4a",{"name":3216,"color":3217},"good first issue","7057ff",{"name":3219,"color":3220},"vitest-environment","b60205",548,"test-utils","devtools iframe not able to run in https","2023-12-05T15:29:38Z","https://github.com/nuxt/test-utils/issues/548",0.7070053,{"description":3228,"labels":3229,"number":3235,"owner":3181,"repository":3182,"state":3204,"title":3236,"updated_at":3237,"url":3238,"score":3239},"### Environment\n\nNode 22\nNuxt 4\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0 alpha 11\n\n### Reproduction\n\nUsing a selectmenu inside a modal doesnt work with search\n\nhttps://codesandbox.io/p/devbox/objective-khayyam-kq8n74\n\n### Description\n\nOpen the modal, open the select options and you will see you cant use the search in any way\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3230,3231,3234],{"name":3213,"color":3214},{"name":3232,"color":3233},"duplicate","cfd3d7",{"name":3178,"color":3179},3109,"SelectMenu search not working inside modal","2025-02-18T10:55:44Z","https://github.com/nuxt/ui/issues/3109",0.7270448,{"description":3241,"labels":3242,"number":3247,"owner":3181,"repository":3182,"state":3204,"title":3248,"updated_at":3249,"url":3250,"score":3251},"### Description\n\nI have a personal project that I upgrade from version 2 to 3. I noticed when doing this the UInput no longer expands to the div container.\n\nIn version 2 the parent container is:\n\n```\n\u003CUFormGroup>\n \u003CUInput />\n\u003C/UFormGroup>\n```\n\n```\n\u003Cdiv class=“relative”>\n \u003Cinput>…\n\u003C/div>\n```\n\nHowever in version 3 it is\n\n```\n\u003CUFormField>\n \u003CUInput />\n\u003C/UFormField >\n```\n\n```\n\u003Cdiv class=“relative inline-flex items-center”>\n \u003Cinput>…\n\u003C/div>\n```\n\nThis is causing the `\u003Cinput>` to not expand to the full width of the parent container. Is there a way to edit this in Nuxt UI 3 to make it fully expand to the parent container?\n\n",[3243,3246],{"name":3244,"color":3245},"question","d876e3",{"name":3178,"color":3179},3955,"UInput not flexing when upgrading from v2 to v3","2025-04-22T14:14:04Z","https://github.com/nuxt/ui/issues/3955",0.7319961,{"description":3253,"labels":3254,"number":3262,"owner":3181,"repository":3181,"state":3204,"title":3263,"updated_at":3264,"url":3265,"score":3266},"### Version\n\n[v2.2.0](https://github.com/nuxt.js/releases/tag/v2.2.0)\n\n### Reproduction link\n\n[https://codesandbox.io/s/k3y402xpyv](https://codesandbox.io/s/k3y402xpyv)\n\n### Steps to reproduce\n\n# Bug:\n\n- visit `Other`\n- visit `Bug`\n\n# No Bug\n\nvisit `Bug` directly or if you came from `Other` to `Bug`, just refresh it.\n\n### What is expected ?\n\nFunctional component's style gets overridden by page's style.\n\n### What is actually happening?\n\nFunctional component's style being overridden by page's style if coming from different route\n\n### Additional comments?\n\nNot sure if this is nuxt issue or vue tbh\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8120\">#c8120\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3255,3258,3259],{"name":3256,"color":3257},"stale","ffffff",{"name":3192,"color":3193},{"name":3260,"color":3261},"2.x","d4c5f9",4309,"Page styles not overriding functional component styles when visited from different route","2023-01-22T15:30:07Z","https://github.com/nuxt/nuxt/issues/4309",0.74231243,{"description":3268,"labels":3269,"number":3272,"owner":3181,"repository":3181,"state":3204,"title":3273,"updated_at":3274,"url":3275,"score":3276},"### Version\r\n\r\n[v1.4.0](https://github.com/nuxt.js/releases/tag/v1.4.0)\r\n\r\n### Reproduction link\r\n\r\n[https://fork-glider.glitch.me/](https://fork-glider.glitch.me/)\r\n\r\n### Steps to reproduce\r\n\r\n- Go to the link provided https://fork-glider.glitch.me/\r\n\r\nI use `vue-styled-components` for my styles but instead of being rendered properly, they flash the unstyled component before.\r\n\r\nLive example here: https://fork-glider.glitch.me/\r\nSource: https://glitch.com/edit/#!/fork-glider\r\n\r\nMy component looks like:\r\n\r\n```\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Capp-title>Welcome!\u003C/app-title>\r\n \u003Crouter-link to=\"/about\">About page\u003C/router-link>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n import styled from 'vue-styled-components';\r\n\r\n const Title = styled.h1`\r\n font-size: 36px;\r\n color: red;\r\n `;\r\n\r\n export default {\r\n components: {\r\n \"app-title\": Title\r\n }\r\n };\r\n\u003C/script>\r\n```\r\n\r\nHere is a quick gif reproducing the issue:\r\n\r\n\r\n### What is expected ?\r\n\r\n- Title shows styled size and color\r\n\r\n### What is actually happening?\r\n\r\n- Title flashes original size and color before changing to styled one.\r\n\r\n(As this problem is not happening while using plain css, I am wondering if the issue has to do with the run-time of the `script` tag. 🤔)\r\n\r\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\r\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7294\">#c7294\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3270,3271],{"name":3192,"color":3193},{"name":3260,"color":3261},3479,"Unstyled css flashes while using vue-styled-components","2023-01-22T15:30:04Z","https://github.com/nuxt/nuxt/issues/3479",0.7490821,{"labels":3278,"number":3281,"owner":3181,"repository":3181,"state":3204,"title":3282,"updated_at":3283,"url":3284,"score":3285},[3279,3280],{"name":3192,"color":3193},{"name":3260,"color":3261},7195,"inheritAttrs: false doesn't work properly with universal mode","2023-01-22T15:34:50Z","https://github.com/nuxt/nuxt/issues/7195",0.75137824,{"description":3287,"labels":3288,"number":3292,"owner":3181,"repository":3293,"state":3204,"title":3294,"updated_at":3295,"url":3296,"score":3297},"- List modules\n- Install a module\n\nLink it in the modules section in concepts.\n",[3289],{"name":3290,"color":3291},"documentation","9DE2BA",1369,"nuxt.com","[API][Commands] Add `modules` ","2023-12-18T12:00:05Z","https://github.com/nuxt/nuxt.com/issues/1369",0.7534468,["Reactive",3299],{},["Set"],["ShallowReactive",3302],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fz_U-1sbvatM3gOoLEZQCaAbUyL4_VSPhNmlBIeg9Px0":-1},"/nuxt/test-utils/582"]