\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```",[3020,3023],{"name":3021,"color":3022},"enhancement","a2eeef",{"name":3024,"color":3025},"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":3035,"labels":3036,"number":3040,"owner":3027,"repository":3027,"state":3029,"title":3041,"updated_at":3042,"url":3043,"score":3044},"### 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).",[3037],{"name":3038,"color":3039},"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":3046,"labels":3047,"number":3048,"owner":3027,"repository":3049,"state":3050,"title":3051,"updated_at":3052,"url":3053,"score":3054},"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":3056,"labels":3057,"number":3067,"owner":3027,"repository":3068,"state":3050,"title":3069,"updated_at":3070,"url":3071,"score":3072},"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",[3058,3061,3064],{"name":3059,"color":3060},"bug","d73a4a",{"name":3062,"color":3063},"good first issue","7057ff",{"name":3065,"color":3066},"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":3074,"labels":3075,"number":3081,"owner":3027,"repository":3028,"state":3050,"title":3082,"updated_at":3083,"url":3084,"score":3085},"### 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```",[3076,3077,3080],{"name":3059,"color":3060},{"name":3078,"color":3079},"duplicate","cfd3d7",{"name":3024,"color":3025},3109,"SelectMenu search not working inside modal","2025-02-18T10:55:44Z","https://github.com/nuxt/ui/issues/3109",0.7270448,{"description":3087,"labels":3088,"number":3093,"owner":3027,"repository":3028,"state":3050,"title":3094,"updated_at":3095,"url":3096,"score":3097},"### 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",[3089,3092],{"name":3090,"color":3091},"question","d876e3",{"name":3024,"color":3025},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":3099,"labels":3100,"number":3108,"owner":3027,"repository":3027,"state":3050,"title":3109,"updated_at":3110,"url":3111,"score":3112},"### 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>",[3101,3104,3105],{"name":3102,"color":3103},"stale","ffffff",{"name":3038,"color":3039},{"name":3106,"color":3107},"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":3114,"labels":3115,"number":3118,"owner":3027,"repository":3027,"state":3050,"title":3119,"updated_at":3120,"url":3121,"score":3122},"### 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>",[3116,3117],{"name":3038,"color":3039},{"name":3106,"color":3107},3479,"Unstyled css flashes while using vue-styled-components","2023-01-22T15:30:04Z","https://github.com/nuxt/nuxt/issues/3479",0.7490821,{"labels":3124,"number":3127,"owner":3027,"repository":3027,"state":3050,"title":3128,"updated_at":3129,"url":3130,"score":3131},[3125,3126],{"name":3038,"color":3039},{"name":3106,"color":3107},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":3133,"labels":3134,"number":3138,"owner":3027,"repository":3139,"state":3050,"title":3140,"updated_at":3141,"url":3142,"score":3143},"- List modules\n- Install a module\n\nLink it in the modules section in concepts.\n",[3135],{"name":3136,"color":3137},"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",3145],{},["Set"],["ShallowReactive",3148],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fz_U-1sbvatM3gOoLEZQCaAbUyL4_VSPhNmlBIeg9Px0":-1},"/nuxt/test-utils/582"]