\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?",[2016,2017],{"name":2005,"color":2006},{"name":1988,"color":1989},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.6911196,{"description":2025,"labels":2026,"number":2028,"owner":1994,"repository":1995,"state":2019,"title":2029,"updated_at":2030,"url":2031,"score":2032},"### 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_",[2027],{"name":1985,"color":1986},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.7022154,{"description":2034,"labels":2035,"number":2041,"owner":1994,"repository":1995,"state":2019,"title":2042,"updated_at":2043,"url":2044,"score":2045},"### 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",[2036,2039,2040],{"name":2037,"color":2038},"duplicate","cfd3d7",{"name":2005,"color":2006},{"name":1988,"color":1989},2924,"[v3] select type only string?","2024-12-17T15:56:57Z","https://github.com/nuxt/ui/issues/2924",0.72222096,{"description":2047,"labels":2048,"number":2055,"owner":1994,"repository":1994,"state":2019,"title":2056,"updated_at":2057,"url":2058,"score":2059},"### 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",[2049,2052],{"name":2050,"color":2051},"3.x","29bc7f",{"name":2053,"color":2054},"pending triage","E99695",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.7581054,{"description":2061,"labels":2062,"number":2065,"owner":1994,"repository":1994,"state":2019,"title":2066,"updated_at":2067,"url":2068,"score":2069},"### Environment\n\nrc-13\r\nnode-18\n\n### Reproduction\n\n//composable\r\n```javascript\r\nconst myfetch = async (url,options,emits) => {\r\n const { data, pending, error, refresh } = await useFetch(url, {\r\n \r\n ...options,\r\n baseURL: useRuntimeConfig().API_URL, \r\n initialCache: false,\r\n headers: new Headers({ 'authorization': (process.client)?localStorage.getItem(\"token\"):''}),\r\n onResponse ({ response }) {\r\n return response._data\r\n },\r\n onResponseError ({ response }) {\r\n return response._data\r\n }\r\n })\r\n const resData = data.value\r\n \r\n return resData\r\n }\r\n```\r\n//component 1\r\n\r\n```javascript\r\n\u003Cscript setup>\r\ngetAllItems();\r\nasync function getAllItems() {\r\n let response = await myfetch('/article/artPosts?' +\r\n 'page=' + page.value + '&' +\r\n 'artPostGroup=' + artPostGroup.value + '&' +\r\n 'limit=' + limit.value, {\r\n method: 'GET'\r\n });\r\n if (response.data)\r\n list.value = response.data.docs;\r\n pages.value = response.data.pages;\r\n}\r\n\u003C/script>\r\n```\r\n\r\n//component 2\r\n\r\n```javascript\r\n\u003Cscript setup>\r\ngetAllItems();\r\nasync function getAllItems() {\r\n let response = await myfetch('/store/storeCourses?' +\r\n 'page=' + page.value + '&' +\r\n 'storeCourseGroup=' + storeCourseGroup.value + '&' +\r\n 'limit=' + limit.value, {\r\n method: 'GET'\r\n });\r\n if (response.data)\r\n list.value = response.data.docs;\r\n pages.value = response.data.pages;\r\n}\r\n\u003C/script>\r\n```\r\n//home.vue\r\n```javascript\r\n\u003Cdiv>\r\n\u003Ccomponent1>\u003C/component1>\r\n\u003Ccomponent2>\u003C/component2>\r\n\u003C/div>\r\n```\n\n### Describe the bug\n\nthe bug is here...\r\nin the page load:\r\nresponse of component1 is the same as response of component2...\r\n\r\n\r\nwhen i use $fetch instead of useFetch, it works good but it makes another problem for me...\r\n\r\non refreshing page,it send a request twice to server\r\n\n\n### Additional context\n\nhow can i write function in composables?\n\n### Logs\n\n_No response_",[2063,2064],{"name":2050,"color":2051},{"name":2053,"color":2054},15451,"UseFetch() calling multiple request, only the last data is fetched and $fetch send requests twice","2023-01-19T17:50:37Z","https://github.com/nuxt/nuxt/issues/15451",0.7622279,{"description":2071,"labels":2072,"number":2075,"owner":1994,"repository":1994,"state":2019,"title":2076,"updated_at":2077,"url":2078,"score":2079},"### 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).",[2073,2074],{"name":2050,"color":2051},{"name":2053,"color":2054},22778,"Allow to modify global useFetch","2023-08-24T08:25:40Z","https://github.com/nuxt/nuxt/issues/22778",0.76283944,{"description":2081,"labels":2082,"number":2084,"owner":1994,"repository":1995,"state":2019,"title":2085,"updated_at":2086,"url":2087,"score":2088},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nDoes anyone know how to increase the width of the modal in `UModal` tag? Thanks in advance!\n\n\n",[2083],{"name":2005,"color":2006},2747,"How do I increase the width of the modal in UModal tag","2024-12-05T12:47:38Z","https://github.com/nuxt/ui/issues/2747",0.76502407,{"description":2090,"labels":2091,"number":2099,"owner":1994,"repository":1995,"state":2019,"title":2100,"updated_at":2101,"url":2102,"score":2103},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.13.1\n- Nuxt Version: -\n- CLI Version: 3.21.1\n- Nitro Version: -\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\n3.0.0-alpha.12\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/purple-water-45l2vr\n\n### Description\n\nIn the Vue application when using the example of how to use the Table component, errors appear with `[Vue warn]: Failed to resolve component: `by which the code cannot be compiled correctly. \n\nThe exact issue here is for example: `const UButton = resolveComponent('UButton')`\n\nIn the reproduction link is the described issue for clear\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2092,2095,2096],{"name":2093,"color":2094},"bug","d73a4a",{"name":1988,"color":1989},{"name":2097,"color":2098},"vue","42b883",3235,"Failed to resolve component in Vue Template","2025-02-19T11:00:41Z","https://github.com/nuxt/ui/issues/3235",0.76803446,["Reactive",2105],{},["Set"],["ShallowReactive",2108],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"V2kiapBdG5Q6sjPw4vnhv_aHPyvl37zqVroz46Wlgeo":-1},"/nuxt/ui/3496"]