\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```",[2865,2868],{"name":2866,"color":2867},"enhancement","a2eeef",{"name":2869,"color":2870},"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":2880,"labels":2881,"number":2885,"owner":2872,"repository":2872,"state":2874,"title":2886,"updated_at":2887,"url":2888,"score":2889},"### 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).",[2882],{"name":2883,"color":2884},"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":2891,"labels":2892,"number":2893,"owner":2872,"repository":2894,"state":2895,"title":2896,"updated_at":2897,"url":2898,"score":2899},"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.46948645,{"description":2901,"labels":2902,"number":2912,"owner":2872,"repository":2913,"state":2895,"title":2914,"updated_at":2915,"url":2916,"score":2917},"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",[2903,2906,2909],{"name":2904,"color":2905},"bug","d73a4a",{"name":2907,"color":2908},"good first issue","7057ff",{"name":2910,"color":2911},"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":2919,"labels":2920,"number":2926,"owner":2872,"repository":2873,"state":2895,"title":2927,"updated_at":2928,"url":2929,"score":2930},"### 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```",[2921,2922,2925],{"name":2904,"color":2905},{"name":2923,"color":2924},"duplicate","cfd3d7",{"name":2869,"color":2870},3109,"SelectMenu search not working inside modal","2025-02-18T10:55:44Z","https://github.com/nuxt/ui/issues/3109",0.7270448,{"description":2932,"labels":2933,"number":2938,"owner":2872,"repository":2873,"state":2895,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### 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",[2934,2937],{"name":2935,"color":2936},"question","d876e3",{"name":2869,"color":2870},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":2944,"labels":2945,"number":2953,"owner":2872,"repository":2872,"state":2895,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### 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>",[2946,2949,2950],{"name":2947,"color":2948},"stale","ffffff",{"name":2883,"color":2884},{"name":2951,"color":2952},"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":2959,"labels":2960,"number":2963,"owner":2872,"repository":2872,"state":2895,"title":2964,"updated_at":2965,"url":2966,"score":2967},"### 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>",[2961,2962],{"name":2883,"color":2884},{"name":2951,"color":2952},3479,"Unstyled css flashes while using vue-styled-components","2023-01-22T15:30:04Z","https://github.com/nuxt/nuxt/issues/3479",0.7490821,{"labels":2969,"number":2972,"owner":2872,"repository":2872,"state":2895,"title":2973,"updated_at":2974,"url":2975,"score":2976},[2970,2971],{"name":2883,"color":2884},{"name":2951,"color":2952},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":2978,"labels":2979,"number":2983,"owner":2872,"repository":2984,"state":2895,"title":2985,"updated_at":2986,"url":2987,"score":2988},"- List modules\n- Install a module\n\nLink it in the modules section in concepts.\n",[2980],{"name":2981,"color":2982},"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",2990],{},["Set"],["ShallowReactive",2993],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fz_U-1sbvatM3gOoLEZQCaAbUyL4_VSPhNmlBIeg9Px0":-1},"/nuxt/test-utils/582"]