\r\n\u003C!-- ... -->\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\" setup>\r\n\r\nconst page = ref\u003Cnumber>(1)\r\n\r\n// temporary name \"promise\" -- maybe this could replace the \"pending\" boolean in Nuxt 4?\r\nconst { data, promise } = useFetch('/api/my-items', {\r\n query: {\r\n page: page\r\n }\r\n})\r\n\r\nasync function handleFetchMore() {\r\n page.value += 1\r\n // would this work? or would nextTick() need to be awaited before it?\r\n await promise.value\r\n}\r\n\r\n// ...\r\n\r\n\u003C/script>\r\n```\r\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).",[2898,2899],{"name":2868,"color":2869},{"name":2871,"color":2872},26678,"Return the current promise from `useFetch` in a computed ref","2024-06-30T11:04:44Z","https://github.com/nuxt/nuxt/issues/26678",0.77674717,{"description":2906,"labels":2907,"number":2912,"owner":2880,"repository":2880,"state":2913,"title":2914,"updated_at":2915,"url":2916,"score":2917},"### Environment\n\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v14.18.3`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `yarn@1.22.17`\r\n- Builder: `vite`\r\n- User Config: `postcss`, `build`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-wmbccm?file=app.vue\n\n### Describe the bug\n\nI have created a separate component for an input field, which is structured as follows:\r\n\r\n```vue components/form/app/TextField.vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Clabel\r\n v-if=\"label\"\r\n :for=\"name\"\r\n class=\"block text-sm pl-0.5\">\r\n {{ label }}\r\n \u003Cspan\r\n class=\"text-accent-blue\"\r\n v-if=\"required\">\r\n *\r\n \u003C/span>\r\n \u003C/label>\r\n \u003Cdiv\r\n class=\"relative mt-1 flex items-center\">\r\n \u003Cinput\r\n class=\"block w-full pl-4 py-3 outline-0 rounded-[4px] border transition-all duration-400 border-gray-300 focus:border-primary-light focus:drop-shadow\"\r\n :type=\"type\"\r\n :value=\"modelValue\"\r\n :name=\"name\"\r\n :id=\"name\"\r\n :class=\"{\r\n 'pr-12': prefix,\r\n 'pr-4': !prefix\r\n }\"\r\n :required=\"required\"\r\n @input=\"$emit('update:modelValue', $event.target.value);\">\r\n \u003Cdiv\r\n v-if=\"prefix\"\r\n class=\"absolute inset-y-0 right-[1px] top-[1px] bottom-[1px] flex\">\r\n \u003Cspan class=\"inline-flex items-center bg-gray-50 border-l border-gray-300 px-4 text-sm font-medium rounded-tr-[4px] rounded-br-[4px]\">\r\n {{ prefix }}\r\n \u003C/span>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\ndefineProps({\r\n name: {\r\n type: [String],\r\n required: true\r\n },\r\n type: {\r\n type: [String],\r\n default: 'text'\r\n },\r\n required: {\r\n type: [Boolean],\r\n required: false,\r\n default: false\r\n },\r\n label: {\r\n type: [String, Boolean],\r\n required: false\r\n },\r\n prefix: {\r\n type: [String, Boolean],\r\n required: false\r\n },\r\n modelValue: {\r\n type: [String],\r\n default: ''\r\n }\r\n})\r\n\u003C/script>\r\n```\r\n\r\nI then included this in the app.vue. The input field and a button are displayed here. This button has a binding @click=\"save()\" to call the save() function.\r\n\r\n```vue app.vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cinput\r\n name=\"email\"\r\n label=\"Email\"\r\n type=\"email\"\r\n v-model=\"form.data.email\"\r\n required\r\n />\r\n\r\n \u003Cbutton @click=\"save()\">Check\u003C/button>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nconst form = ref({\r\n data: {\r\n email: '',\r\n },\r\n});\r\n\r\nconst save = async () => {\r\n const { data, error } = await useFetch('/api/hello', {\r\n method: 'POST',\r\n body: form.value.data,\r\n });\r\n\r\n return true;\r\n};\r\n\u003C/script>\r\n```\r\n\r\n**Reproduction:**\r\n1. go to https://githubwmbccm-mhyg--3000.local-credentialless.webcontainer.io/ and open the Developer Tools -> Network.\r\n2. next enter a string in the input field. e.g. email@email.de\r\n3. click on the button \"Check\".\r\n\r\nNow you can see that a request is sent to \"/api/hello\" as expected. Everything is correct and as expected. (see screenshot)\r\n\r\n\r\n\r\n**The error:**\r\nIf you now click in the input field and add a letter, exactly the same request is automatically sent again without clicking on the \"Check\" button. A new request is sent for each letter. (see screenshot)\r\n\r\n\r\n\r\nIt is noticeable that this behaviour only occurs with a POST request. If you useFetch() with GET, this behaviour does not occur. If you use $fetch instead of useFetch() everything works as expected even with a POST request. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2908,2911],{"name":2909,"color":2910},"3.x","29bc7f",{"name":2874,"color":2875},15741,"closed","useFetch automatic request after first request","2024-12-02T14:49:54Z","https://github.com/nuxt/nuxt/issues/15741",0.7393308,{"description":2919,"labels":2920,"number":2926,"owner":2880,"repository":2927,"state":2913,"title":2928,"updated_at":2929,"url":2930,"score":2931},"### Description\n\nI was experimenting with two `UBadge` components and `rounded-e-full`/`rounded-s-full` to achieve a `UButtonGroup` effect, would a `UBagdeGroup` component be to much to ask? :)",[2921,2923],{"name":2868,"color":2922},"a2eeef",{"name":2924,"color":2925},"v3","49DCB8",3156,"ui","BadgeGroups!","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3156",0.74606377,{"description":2933,"labels":2934,"number":2937,"owner":2880,"repository":2880,"state":2913,"title":2938,"updated_at":2939,"url":2940,"score":2941},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v21.7.1`\r\n- Nuxt Version: `3.10.3`\r\n- CLI Version: `3.10.1`\r\n- Nitro Version: `2.9.1`\r\n- Package Manager: `pnpm@8.15.4`\r\n- Builder: `-`\r\n- User Config: `devtools`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\n[https://codesandbox.io/p/sandbox/fancy-cloud-hdr3gz](https://codesandbox.io/p/sandbox/fancy-cloud-hdr3gz).\r\n\r\n### Describe the bug\r\n\r\nIn the repoduction provided, I'm trying to avoid manually handling the loading indicator or filler state returned by `useFetch`. Instead, I want Nuxt.js to take care of it.\r\n\r\nDuring page changes, the `\u003CNuxtLoadingIndicator />` component effectively shows the loading state while `useFetch` is awaited, blocking navigation until the request finishes. This seemed like a good solution to eliminate the need for manual loading state management.\r\n\r\nHowever, this approach falls short when the page doesn't reload but the request is refetched due to actions like refresh, parameter changes, or anything that doesn't trigger a full page mount.\r\n\r\nInitially, it seemed like `useLoadingIndicator` could be used to control the loading indicator manually using `onRequest` and `onResponse` events. Unfortunately, since the loading indicator is tied to route changes, changing a query parameter triggers Nuxt's `page:loading:start` and `page:loading:end` events. This causes the loading indicator to finish before the response arrives, breaking my solution.\r\n\r\nCheck the `composables/api-fetch.ts` for more clarity.\r\n\r\n### Additional context\r\n\r\nI patched the original `useLoadingIndicator`. In `start()` method I added the following code:\r\n\r\n```ts\r\nconst start = () => {\r\n nuxtApp._loadingIndicatorCount = nuxtApp._loadingIndicatorCount || 0;\r\n nuxtApp._loadingIndicatorCount++;\r\n set(0);\r\n};\r\n```\r\nand for `finish()`\r\n\r\n```ts\r\nfunction finish({ force } = { force: false }) {\r\n if (nuxtApp._loadingIndicatorCount && nuxtApp._loadingIndicatorCount > 1 && !force) {\r\n nuxtApp._loadingIndicatorCount--;\r\n return;\r\n }\r\n progress.value = 100;\r\n done = true;\r\n clear();\r\n _hide(isLoading, progress);\r\n}\r\n```\r\n\r\nand in `useFetch`, i called `loadingIndicator.finish({force: true})` inside `onResponse`\r\n\r\n**Patch:**\r\n\r\n```patch\r\ndiff --git a/dist/app/composables/loading-indicator.d.ts b/dist/app/composables/loading-indicator.d.ts\r\nindex a11650a06ec63d485056f294de09997f0fd9ad19..0ddee29d949df9f3e6b6b9817ee6082388cfe0bd 100644\r\n--- a/dist/app/composables/loading-indicator.d.ts\r\n+++ b/dist/app/composables/loading-indicator.d.ts\r\n@@ -17,7 +17,7 @@ export type LoadingIndicator = {\r\n isLoading: Ref\u003Cboolean>;\r\n start: () => void;\r\n set: (value: number) => void;\r\n- finish: () => void;\r\n+ finish: ({ force }: { force: boolean }) => void;\r\n clear: () => void;\r\n };\r\n /**\r\ndiff --git a/dist/app/composables/loading-indicator.js b/dist/app/composables/loading-indicator.js\r\nindex 7324e6f0aad0d6693e3f3301547533343170143c..663e07ed12e78f109247b6731cfb5766d8b1bf77 100644\r\n--- a/dist/app/composables/loading-indicator.js\r\n+++ b/dist/app/composables/loading-indicator.js\r\n@@ -23,7 +23,11 @@ function createLoadingIndicator(opts = {}) {\r\n let done = false;\r\n let rafId;\r\n let _throttle = null;\r\n- const start = () => set(0);\r\n+ const start = () => {\r\n+ nuxtApp._loadingIndicatorCount = nuxtApp._loadingIndicatorCount || 0;\r\n+ nuxtApp._loadingIndicatorCount++;\r\n+ set(0);\r\n+ };\r\n function set(at = 0) {\r\n if (nuxtApp.isHydrating) {\r\n return;\r\n@@ -43,7 +47,12 @@ function createLoadingIndicator(opts = {}) {\r\n _startProgress();\r\n }\r\n }\r\n- function finish() {\r\n+ function finish({ force } = { force: false }) {\r\n+ if (nuxtApp._loadingIndicatorCount && nuxtApp._loadingIndicatorCount > 1 && !force) {\r\n+ nuxtApp._loadingIndicatorCount--;\r\n+ return;\r\n+ }\r\n+\r\n progress.value = 100;\r\n done = true;\r\n clear();\r\n```\r\n```json\r\n\"pnpm\": {\r\n \"patchedDependencies\": {\r\n \"nuxt@3.10.3\": \"patches/nuxt@3.10.3.patch\"\r\n }\r\n}\r\n```\r\n\r\n\r\n### Logs\r\n\r\n_No response_",[2935,2936],{"name":2909,"color":2910},{"name":2874,"color":2875},26226,"loading indicator finishes before the actual `finish()` is called if route query param changes","2024-04-10T04:51:32Z","https://github.com/nuxt/nuxt/issues/26226",0.74750686,{"description":2943,"labels":2944,"number":2949,"owner":2880,"repository":2880,"state":2913,"title":2950,"updated_at":2951,"url":2952,"score":2953},"I have the following dependencies:\n\n```\n\"dependencies\": {\n \"bootstrap\": \"^5.3.3\",\n \"consola\": \"^3.2.3\",\n \"jquery\": \"^3.7.1\",\n \"nuxt\": \"^3.14.1592\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n }\n\n```\nInitially I wanted to implement push state in the modal so that when the back button is used, it will close the modal. but when I implemented it I had to press the back button 2 times to be able to close the modal. is the bootstrap modal like that or is there something else that affects it? ",[2945,2946],{"name":2874,"color":2875},{"name":2947,"color":2948},"needs reproduction","FBCA04",30245,"Bootstrap modal uses push state, even though I don't use it","2024-12-13T11:47:56Z","https://github.com/nuxt/nuxt/issues/30245",0.75107104,{"description":2955,"labels":2956,"number":2964,"owner":2880,"repository":2880,"state":2913,"title":2965,"updated_at":2966,"url":2967,"score":2968},"### Version\n\n[v2.3.4](https://github.com/nuxt.js/releases/tag/v2.3.4)\n\n### Reproduction link\n\n[https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-loading?from-embed](https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-loading?from-embed)\n\n### Steps to reproduce\n\nI configured my custom loading component as described in documentation:\n```json\n /*\n ** Customize the progress-bar color\n */\n loading: '@/components/Loading.vue',\n```\nand created my new component\n```\n\u003Ctemplate>\n \u003Cdiv v-if=\"loading\" class=\"loading-page\">\n Loading..\n \u003C/div>\n\u003C/template>\n\n\u003Cscript>\nexport default {\n data: () => ({\n loading: false\n }),\n methods: {\n start() {\n this.loading = true\n },\n finish() {\n this.loading = false\n }\n }\n}\n\u003C/script>\n\n\u003Cstyle scoped>\n.loading-page {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 9999;\n background-color: red;\n}\n\u003C/style>\n```\n\n### What is expected ?\n\nMy custom loading component showed during page load.\n\n### What is actually happening?\n\nNothing, my custom component and even the default one are never showed up.\n\n### Additional comments?\n\nRelated issued closed but not solved:\n#1454\n#1463\n\nI notice that even the example provided in the documentation is not working, I just notice a little flicker caused by browser load.\n\nI try to modify the template like this:\n```\n\u003Ctemplate>\n \u003Cdiv v-if=\"true\" class=\"loading-page\">\n Loading..\n \u003C/div>\n\u003C/template>\n```\nand I correctly see the component, so the component have the correct dimension/position/z-index.\n\nI try to add some console log output:\n```\nexport default {\n data: () => ({\n loading: false\n }),\n methods: {\n start() {\n console.log('loading..')\n this.loading = true\n },\n finish() {\n console.log('loaded!')\n this.loading = false\n }\n }\n}\n```\nand I never see that output inside the console, so those methods are never called.\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/c8458\">#c8458\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2957,2960,2961],{"name":2958,"color":2959},"stale","ffffff",{"name":2874,"color":2875},{"name":2962,"color":2963},"2.x","d4c5f9",4751,"Why the Custom Loading Component may not work?","2023-01-22T15:30:09Z","https://github.com/nuxt/nuxt/issues/4751",0.7513142,{"description":2970,"labels":2971,"number":2977,"owner":2880,"repository":2927,"state":2913,"title":2978,"updated_at":2979,"url":2980,"score":2981},"### Description\n\n```ts\nimport { ModalsForgotPassword } from '#components'\n\nconst modal = useModal()\n\n\nconst onForgot = async () => {\n await modal.close()\n\n// not opened\n modal.open(ModalsForgotPassword)\n}\n```",[2972,2975],{"name":2973,"color":2974},"question","d876e3",{"name":2947,"color":2976},"CB47CF",4087,"how to open a new modal again when closing the mod execution","2025-06-01T13:25:48Z","https://github.com/nuxt/ui/issues/4087",0.7515894,{"description":2983,"labels":2984,"number":2987,"owner":2880,"repository":2927,"state":2913,"title":2988,"updated_at":2989,"url":2990,"score":2991},"### Description\n\nI am using the modal component with the programatic opening and closing, exactly as described in the documentation here: https://ui.nuxt.com/components/modal#programmatic-usage\n\nHowever, whenever I try to get a result on close, for instance if I were to add a form or something in the modal, I do not get anything. When I log the result as in this line in the documentation: const shouldIncrement = await modal.open() - I get an unresolved promise. I am using the documentation verbatim.\n\nHow can I get something back from my modal that isn't an unresolved promise? I am using v 3.1.0",[2985,2986],{"name":2973,"color":2974},{"name":2924,"color":2925},4001,"How to get a modal to emit on close instead of only on open","2025-04-29T02:46:40Z","https://github.com/nuxt/ui/issues/4001",0.75329936,["Reactive",2993],{},["Set"],["ShallowReactive",2996],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f1mLMEgGBqmS7mwsyAJGdm2R0r1_c8ngr_JfE5q5HeAg":-1},"/nuxt/ui/4249"]