\n \u003C/template>\n\u003C/UModal>\n```\n\n\n### Description\n\nselect menu's search input always autofocus inside modal, even when the autofocus is set to false.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2906,2909,2912],{"name":2907,"color":2908},"bug","d73a4a",{"name":2910,"color":2911},"v3","49DCB8",{"name":2913,"color":2914},"triage","ffffff",3933,"nuxt","ui","open","SelectMenu's autofocus doesn't work inside Modal","2025-04-19T06:22:26Z","https://github.com/nuxt/ui/issues/3933",0.71392214,{"description":2924,"labels":2925,"number":2932,"owner":2916,"repository":2916,"state":2918,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### Describe the feature\n\n**Problem:** Nuxt currently lacks an integrated way to make query parameters reactive. Although useRoute().query provides access to query parameters, it is not reactive, which limits dynamic updates when the query parameter changes.\nA common solution in Vue is to use useUrlSearchParams() from VueUse; however, this approach isn’t compatible with SSR, which is essential in many Nuxt applications.\n\n**Proposed Solution:** Add a new composable which makes query parameters reactive without sacrificing SSR compatibility, like this:\n```ts\nfunction useRouteQuery(id: string) {\n const route = useRoute()\n const router = useRouter()\n return computed({\n get: () => route.query[id],\n set: (value) => {\n router.push({ query: { ...route.query, [id]: value } })\n },\n })\n}\n```\n\n### Additional information\n\n- [x] 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).",[2926,2929],{"name":2927,"color":2928},"pending triage","E99695",{"name":2930,"color":2931},"possible regression","B90A42",29861,"feat: Add Reactive Query Parameters in Nuxt with SSR Compatibility","2025-06-12T02:48:56Z","https://github.com/nuxt/nuxt/issues/29861",0.7142667,{"description":2938,"labels":2939,"number":2944,"owner":2916,"repository":2917,"state":2918,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Description\n\nHow can I assign an ID to a tab so that I can scroll directly to it?\nCurrently, I’m working around this by giving the div inside the slot (i.e. the tab content) an ID. When the tab is opened, I scroll to that ID manually.\n\n```\n\u003Ctemplate>\n \u003CUAccordion\n v-model=\"currentOpen\"\n :ui=\"accordionStyle\"\n :items=\"items\"\n >\n \u003Ctemplate #component=\"{ item }\">\n \u003Ccomponent\n :is=\"getComponent((item as CustomAccordionItem).componentName)\"\n :id=\"(item as CustomAccordionItem).sectionKey\"\n :section-key=\"(item as CustomAccordionItem).sectionKey\"\n @section-mounted=\"sectionMounted\"\n />\n \u003C/template>\n \u003C/UAccordion>\n\u003C/template>\n```\n\ndid i miss something?\n\n### Additional context\n\n_No response_",[2940,2943],{"name":2941,"color":2942},"enhancement","a2eeef",{"name":2913,"color":2914},3868,"Allow assigning IDs to Nuxt UI Tab panels for scroll targeting","2025-04-12T08:35:52Z","https://github.com/nuxt/ui/issues/3868",0.7218087,{"description":2950,"labels":2951,"number":2957,"owner":2916,"repository":2916,"state":2918,"title":2958,"updated_at":2959,"url":2960,"score":2961},"### Describe the feature\r\n\r\nNow that I think I understand composables better, especially useFetch, I see myself using it everytime I communicate to my api. Even when posting a form, because I like the out of the box reactive properties it provides.\r\n\r\nAnd now that Nuxt 3.11 adds `clear()` I feel its complete.\r\n\r\nI often end up doing this:\r\n\r\n```js\r\nconst formData = reactive({\r\n firstName: 'Peter',\r\n lastName: 'Griffin',\r\n ...\r\n});\r\n\r\nconst { status, execute: submit, clear, error } = useFetch('...', {\r\n watch: false,\r\n immediate: false,\r\n \r\n body: formData,\r\n method: 'POST',\r\n});\r\n\r\nonBeforeMount(clear); // maybe theres an even better way to automatically clear things up?\r\n```\r\n\r\nI propose to add a new composable, analog to `useLazyFetch`.\r\n\r\nIt could be named `useManualFetch`, `usePostFetch` (`usePost`?) or `useSubmitFetch` (`useSubmit`?)\r\n\r\nAnd it could be used like this:\r\n\r\n```\r\nconst formData = reactive({ ... });\r\nconst { status, error, execute: submit } = useSubmit('...', formData);\r\n```\r\n\r\nMaybe `lazy: true` and `server: false` is also a good default here? I'm not at all familiar enough with SSR and nitro at this point–\r\n\r\nI know I could make (and have made) that composable myself, but I think this is a good thing to offer out of the box to everybody.\r\n\r\nWhat do you think?\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [x] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2952,2954],{"name":2941,"color":2953},"8DEF37",{"name":2955,"color":2956},"discussion","538de2",26306,"adding useManualFetch / usePostFetch / useSubmitFetch composable","2024-06-30T11:05:09Z","https://github.com/nuxt/nuxt/issues/26306",0.7282533,{"description":2963,"labels":2964,"number":2966,"owner":2916,"repository":2917,"state":2967,"title":2968,"updated_at":2969,"url":2970,"score":2971},"### Description\n\n### Use Case\nWhen using UTable with expandable rows alongside row-click navigation, it's currently impossible to prevent the expand action from triggering the row navigation. A custom slot would allow users to implement `@click.stop` on the expand button, separating its behavior from row clicks.\n\n### Example of Desired Usage\n```vue\n\u003CUTable :rows=\"rows\" :columns=\"columns\" @row-click=\"navigateToPage\">\n \u003Ctemplate #expand-btn=\"{ expanded, toggle }\">\n \u003Cbutton @click.stop=\"toggle\">\n {{ expanded ? 'Collapse' : 'Expand' }}\n \u003C/button>\n \u003C/template>\n\u003C/UTable>\n```\n\nI'd also like to take this opportunity to add another suggestion : Implement a way to control expandability on a per-row basis.\n\nThanks\n\n### Additional context\n\n_No response_",[2965],{"name":2941,"color":2942},2301,"closed","Expand Button Slot for UTable","2024-11-05T16:13:52Z","https://github.com/nuxt/ui/issues/2301",0.6841858,{"labels":2973,"number":2978,"owner":2916,"repository":2916,"state":2967,"title":2979,"updated_at":2980,"url":2981,"score":2982},[2974,2977],{"name":2975,"color":2976},"3.x","29bc7f",{"name":2927,"color":2928},14292,"Respect dynamic params when calling `refresh()` returned by `useFetch`","2023-01-19T17:32:45Z","https://github.com/nuxt/nuxt/issues/14292",0.6946234,{"description":2984,"labels":2985,"number":2987,"owner":2916,"repository":2916,"state":2967,"title":2988,"updated_at":2989,"url":2990,"score":2991},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: -\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Reproduction\n\n[https://stackblitz.com/edit/nuxt-starter-bpyqqk?embed=1&file=pages%2Fbad.vue](url)\n\n\n**good case**\n\n```\nconst ss_sl = ref(0);\n// useGoodSSRFetch defined in composables\nconst { data, error, refresh } = useGoodSSRFetch(\n 'https://api.kuleu.com/api/suijimima',\n 'GET',\n { ss_sl } // The parameter type is: ref\n);\n\nconst next = async () => {\n ss_sl.value++;\n console.log('count-->', ss_sl.value);\n\n refresh();\n};\n```\n\n**bad case**\n```\nconst ss_sl = ref(0);\n// useBadSSRFetch defined in composables\nconst { data, error, refresh } = useBadSSRFetch(\n 'https://api.kuleu.com/api/suijimima',\n 'GET',\n { ss_sl: ss_sl.value } // The parameter type is: value\n);\n\nconst next = async () => {\n ss_sl.value++;\n console.log('count-->', ss_sl.value);\n\n refresh();\n};\n```\n\n### Describe the bug\n\nI encapsulated the useAsyncData function under ‘composables’, and the call in the vue file was successful and I got the first page data, but when I wanted to get the second page data via 'refresh', I found that if the 'page' parameter is of the value type, I can only get the first page forever, but if the input parameter is a ref, I can get the subsequent pages normally.\n\n我在‘composables’目录下对‘useAsyncData’进行了封装,在vue文件中成功调用并得到了第1页数据,但当我想通过‘refresh’获取第2页数据时,我发现如果传入的'page'参数是值类型时,虽然我修改了'page'参数的值为2,但我仍然获取到第1页;但如果传入参数是ref类型则可以正常获取后续的页面。\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2986],{"name":2927,"color":2928},29846,"useAsyncData cannot be refreshed with ref-value in 'composables'","2024-12-19T13:54:49Z","https://github.com/nuxt/nuxt/issues/29846",0.70032966,{"labels":2993,"number":2998,"owner":2916,"repository":2916,"state":2967,"title":2999,"updated_at":3000,"url":3001,"score":3002},[2994,2995],{"name":2941,"color":2953},{"name":2996,"color":2997},"2.x","d4c5f9",7645,"Stringify static payload for better performance","2023-02-14T11:30:09Z","https://github.com/nuxt/nuxt/issues/7645",0.7189678,{"description":3004,"labels":3005,"number":3009,"owner":2916,"repository":2916,"state":2967,"title":3010,"updated_at":3011,"url":3012,"score":3013},"### Describe the feature\r\n\r\nHi 👋🏻 \r\n\r\nI'm loving the nuxt as I'm learning more. Recently, I had a thought while making the API call on DX improvements.\r\n\r\n## Problem\r\n\r\nI'm so thankful that nuxt provides adding query params via `query` in `useFetch` however for URL params we still have to use computed property.\r\n\r\n## Solution\r\n\r\nWe can allow setting params in url via object syntax just like we have in github api:\r\n\r\n\r\nexample:\r\n```ts\r\nconst postId = ref(1)\r\nuseFetch('https://jsonplaceholder.typicode.com/posts/{postId}/comments', {\r\n query: { q: 'ticket' },\r\n params: { postId },\r\n})\r\n\r\npostId.value = 2 // refetch triggers\r\n```\r\n\r\nHere's simple utility function that injects the params: https://github.com/antfu/utils/pull/34\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3006,3007,3008],{"name":2941,"color":2953},{"name":2955,"color":2956},{"name":2975,"color":2976},21830,"✨ Template syntax for url parameters (DX)","2023-07-03T11:07:45Z","https://github.com/nuxt/nuxt/issues/21830",0.7235758,{"description":3015,"labels":3016,"number":3019,"owner":2916,"repository":2916,"state":2967,"title":3020,"updated_at":3021,"url":3022,"score":3023},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v19.5.0`\r\n- Nuxt Version: `3.2.3`\r\n- Nitro Version: `2.2.3`\r\n- Package Manager: `npm@9.3.1`\r\n- Builder: `vite`\r\n- User Config: `modules`, `runtimeConfig`, `content`, `image`, `googleFonts`\r\n- Runtime Modules: `@nuxt/content@2.5.2`, `@nuxtjs/google-fonts@3.0.0`, `@nuxt/image-edge@1.0.0-27968280.9739e4d`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nThe following code fetches search results. It's automatically refreshed when the searchquery ref is changed.\r\n\r\n```javascript\r\nconst navSearchAPICall = useLazyAsyncData(\r\n 'searchWorking',\r\n () => $fetch('/api/search', {\r\n params: {\r\n query: searchquery.value\r\n }\r\n }),\r\n { \r\n server: false,\r\n watch: [searchquery]\r\n }\r\n)\r\n```\r\n\r\nThis works as expected. But the following code, wich should behave the same according to the documentation, does not work. The request is refreshed when the searchquery ref changes, but the query parameters stay the same.\r\n\r\n```javascript\r\nconst searchAPICall = useLazyFetch('/api/search', {\r\n key: 'searchNotWorking',\r\n params: {\r\n query: searchquery.value\r\n },\r\n server: false,\r\n watch: [searchquery]\r\n }\r\n)\r\n```\r\n\r\n\r\n\n\n### Describe the bug\n\nAs described in the reproduction, when using `useLazyAsyncData`, the request is refreshed with updated query parameters according to the searchquery ref. \r\n\r\nBut when using `useLazyFetch`, the request is refreshed but sent with unchanged query parameters.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3017,3018],{"name":2975,"color":2976},{"name":2927,"color":2928},19665,"useLazyFetch does not behave like useLazyAsyncData","2023-03-14T11:09:45Z","https://github.com/nuxt/nuxt/issues/19665",0.7240193,["Reactive",3025],{},["Set"],["ShallowReactive",3028],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fmjI2cy2L3bc_22OV-vfavx-XSSWhzX8Adl8EAaARR9E":-1},"/nuxt/ui/3398"]