\n\n// filter by tags\nconst items = [\n {\n label: \"Show all tags\",\n value: \"\"\n },\n {\n label: \"Only Red Tags\",\n value: \"red\"\n },\n {\n label: \"Only Green Tags\",\n value: \"green\"\n }\n]\n\nconst tagFilter = ref(null)\n```\n\nbut in v3 I now get this error:\n\n> Error: A \u003CSelectItem /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.\n\nHow would I add this option in?",[2887,2890],{"name":2888,"color":2889},"question","d876e3",{"name":2860,"color":2861},3647,"closed","How do I use an empty string with a USelect value?","2025-03-21T21:54:20Z","https://github.com/nuxt/ui/issues/3647",0.687699,{"description":2898,"labels":2899,"number":2905,"owner":2866,"repository":2867,"state":2892,"title":2906,"updated_at":2907,"url":2908,"score":2909},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nFor example if I use something like this,\n\n`const items=[{label:'option 1', value:1},{label:'option 2',value:2}]`\n\n the value that is always assigned is string '1'\n\n`const typeData=ref(1)`\n\n ``\n \u003CUSelect v-model=\"form.productType\" class=\"w-full\" :items=\"items\" />\n```\n",[2900,2903,2904],{"name":2901,"color":2902},"duplicate","cfd3d7",{"name":2888,"color":2889},{"name":2860,"color":2861},2924,"[v3] select type only string?","2024-12-17T15:56:57Z","https://github.com/nuxt/ui/issues/2924",0.70476955,{"description":2911,"labels":2912,"number":2914,"owner":2866,"repository":2867,"state":2892,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### Description\n\nHi,\n\nThis issue is linked to the first I wrote : [#3056](https://github.com/nuxt/ui/issues/3056).\n\nMy initial goal was to be able to validate a form for each row of a Table. Every row contains different inputs and one can validate the changes on the row by clicking an action button. I'd like every row to be wrapped inside a form tag.\n\nTo do so, I just created, outside of my table, as many form as there are rows, and linked the inputs from each row to it's corresponding form to be able to validate it.\n\nA few extracts :\n\n```\n \u003Cform\n v-for=\"(item, index) in list\"\n :id=\"`${index}-form`\"\n :key=\"index\"\n @submit.prevent=\"save(param)\"\n />\n```\n\n... \n\n```\n\u003Cu-input\n v-model=\"params.row[key]\"\n required\n :form=\"`${params.index}-form`\"\n @select.stop\n @click.stop\n />\n```\n\n...\n\n```\n \u003Ctemplate #actions-data=\"params\">\n \u003Cu-button type=\"submit\" :form=\"`${params.index}-form`\">\n Submit\n \u003C/u-button>\n \u003C/template>\n```\n\nThe issue now is that I also use some SelectMenu items in some of my columns, and by inspecting the code I can clearly see that it wraps an input inside it, but I'm not able to pass the form attribute as a props.\n\nTo be more clear, currently here's a bit of the code inside the SelectMenu.vue component : \n\n```\n \u003Cinput\n v-if=\"required\"\n :value=\"modelValue\"\n :required=\"required\"\n :class=\"uiMenu.required\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n```\n\nI'd like this to be like so, to be able to clearly state the value on the input's form HTML attribute : \n\n```\n \u003Cinput\n v-if=\"required\"\n :value=\"modelValue\"\n :required=\"required\"\n :class=\"uiMenu.required\"\n :form=\"formAttribute\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n```\n\nI'm gonna try it locally and open a PR for that. \n\n### Additional context\n\n_No response_",[2913],{"name":2857,"color":2858},3106,"[SelectMenu] Add prop to manage the input's form HTML attribute","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3106",0.7133568,{"description":2920,"labels":2921,"number":2926,"owner":2866,"repository":2866,"state":2892,"title":2927,"updated_at":2928,"url":2929,"score":2930},"### Environment\r\n\r\n \"nuxt\": \"^3.0.0\",\r\n\r\n\r\n### Reproduction\r\n\r\nI created a composable as follows to attach a header whenever I use the useFetch function.\r\n\r\n```\r\nexport const useCommon = () => {\r\n async function useFetchToken(api: string, option: useFetchTokenTyle){\r\n const autoOption:any = {\r\n headers: (option.headers) ?? { Authorization: 'Bearer ' + ado_token.value }\r\n }\r\n ...\r\n return await useFetch(api, {...option,...autoOption}) \r\n }\r\n return {\r\n useFetchToken\r\n }\r\n}\r\n```\r\nand I use this useFetchToken composable twice in one\r\n\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nconst { useFetchToken } = useCommon()\r\nlet {data:category_lists, refresh:cateRefresh} = await useFetchToken('/api/action', { \r\n baseURL: CATEGORY_API,\r\n method: 'post',\r\n body: {\r\n action: 'DoSomeThing',\r\n }\r\n})\r\n\r\nlet {data:section_lists, refresh:sectionRefresh} = await useFetchToken('/api/action', { \r\n baseURL: CATEGORY_API,\r\n method: 'post',\r\n body: {\r\n action: 'DoSomeThing2',\r\n }\r\n})\r\n```\r\nThen, a strange result occurs.\r\n\r\n\"category_lists\" affect from second useFetchToken composable. \"category_lists\" is overwritten by 2nd useFetchToken composable.\r\n\r\n\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nThe 2 fetchs are return different results.\r\n\r\nBut when I refresh, category_lists is equals to section_lists.\r\n\r\nWhen I run cateRefresh, category_lists get right result.\r\nWhen I delete 2nd useFetchToken part, \"category_lists\" work correctly.\r\nWhen I change useFetchToken to useFetch, it will work well all.\r\n",[2922,2925],{"name":2923,"color":2924},"3.x","29bc7f",{"name":2877,"color":2878},12440,"When I use the method from composable twice, it works weird","2023-01-19T16:06:25Z","https://github.com/nuxt/nuxt/issues/12440",0.7505273,{"description":2932,"labels":2933,"number":2936,"owner":2866,"repository":2866,"state":2892,"title":2937,"updated_at":2938,"url":2939,"score":2940},"### Describe the feature\n\n## The problem\r\n\r\nUses that need to use interceptors or anything else on `useFetch()` require to:\r\n\r\na. Create a new composable `useCustomFetch()` with the new functionality.\r\nb. Create a new compasable with `$fetch` and add the new functionality with the old.\r\nc. Modify the `useFetch()` on each call in every part of the application.\r\n\r\nAll of these scenarios could be fixed by offering the user a way to modify the `useFetch()` function _before_ its given into userland. \r\n\r\n## Solution\r\n\r\nThis could be accomplished easily by allowing the user to _replace_ the `useFetch()` composable with it' own and receive the original object. Each callback registered would be executed without order guarantee.\r\n\r\n```js\r\n// /composables/useFetch.js\r\n\r\nexport default () => {\r\n return useFetch().global(fetch => {\r\n // ...\r\n })\r\n}\r\n```\r\n\r\nThis approach fixes four things:\r\n\r\n- Doesn't replaces `useFetch()`, it extends it.\r\n- Users that already use `useFetch.js` can still use it as always.\r\n- Users that already use `useCustomFetch.js` can still use it as always.\r\n- Remove the `WARN Duplicated imports \"useFetch\", the one from \"#app\" has been ignored`\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).",[2934,2935],{"name":2923,"color":2924},{"name":2877,"color":2878},22778,"Allow to modify global useFetch","2023-08-24T08:25:40Z","https://github.com/nuxt/nuxt/issues/22778",0.75472015,{"description":2942,"labels":2943,"number":2946,"owner":2866,"repository":2867,"state":2892,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nHello folks i'm so new to Nuxt UI ( Used primevue before ) and I was checking the docs of V2 & V3 and here is my question : Does V3 has an override strategy like V2 ? And please for the font-sizing is there some Nuxt UI Utilites or only tailwinds finaly please accept my sincere thanks for your great work",[2944,2945],{"name":2888,"color":2889},{"name":2860,"color":2861},2930,"Overrride strategy","2024-12-19T18:23:51Z","https://github.com/nuxt/ui/issues/2930",0.7562944,{"description":2952,"labels":2953,"number":2956,"owner":2866,"repository":2867,"state":2892,"title":2957,"updated_at":2958,"url":2959,"score":2960},"### 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",[2954,2955],{"name":2888,"color":2889},{"name":2860,"color":2861},3955,"UInput not flexing when upgrading from v2 to v3","2025-04-22T14:14:04Z","https://github.com/nuxt/ui/issues/3955",0.7591132,{"description":2962,"labels":2963,"number":2964,"owner":2866,"repository":2965,"state":2892,"title":2966,"updated_at":2967,"url":2968,"score":2969},"Ok, so I've followed the instructions here: https://nuxt.com/modules/icon#custom-local-collections\n\nI have my folder in \"assets\", with some icons to test:\n\n\n\nThen I have this in my nuxt.config.ts:\n\n```\nicon: {\n aliases: aliases,\n clientBundle: {\n // list of icons to include in the client bundle\n icons: iconsToBundle,\n\n // scan all components in the project and include icons\n scan: true,\n\n // guard for uncompressed bundle size, will fail the build if exceeds\n sizeLimitKb: 256\n },\n customCollections: [\n {\n prefix: 'nemus',\n dir: './assets/icons'\n }\n ]\n },\n```\n\nAnd it seems to be correctly configured, as I get this message when I run the app:\n\n```\n[1:21:18 PM] ✔ Nuxt Icon loaded local collection nemus with 10 icons\n```\n\nBut when I use one of the icons in a component like this:\n```\n\u003CIcon\n name=\"nemus:trucker-blue\"\n :class=\"['size-4 min-w-4', props.isFav ? 'text-fav ' : 'text-secondary-300']\"\n />\n```\n\nI get this error on the console:\n```\n WARN [Icon] failed to load icon nemus:trucker-blue (repeated 5 times)\n\n\n WARN [nuxt] Failed to stringify dev server logs. Received DevalueError: Cannot stringify arbitrary non-POJOs. You can define your own reducer/reviver for rich types following the instructions in https://nuxt.com/docs/api/composables/use-nuxt-app#payload.\n```\n\nI'm guessing the problem is that I didn't understand this line in the docs:\n```\nNote that custom local collections require you to have a server to serve the API. \n```\n\nIf anyone could shed some light, I'd appreciate it a lot :)",[],355,"icon","Help: can't figure out the server part for custom collections","2025-02-11T13:00:52Z","https://github.com/nuxt/icon/issues/355",0.76838166,["Reactive",2971],{},["Set"],["ShallowReactive",2974],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fV2kiapBdG5Q6sjPw4vnhv_aHPyvl37zqVroz46Wlgeo":-1},"/nuxt/ui/3496"]