\r\n```\r\n\r\n\r\n## Code\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003CIcon />\r\n\u003C/tempalte>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst props = defineProps\u003C{name: string}>()\r\n\r\nconst Icon = computed(() => defineAsyncComponent(() => import(`../icons/${props.name}.svg?component`)));\r\n\u003C/script>\r\n```\r\n\r\n\r\n\r\n",[2865,2868,2871],{"name":2866,"color":2867},"workaround available","11376d",{"name":2869,"color":2870},"❗ p4-important","D93F0B",{"name":2872,"color":2873},"performance","E84B77",18376,"nuxt","open","Disable `prefetch` for dynamic imports","2025-03-16T23:31:44Z","https://github.com/nuxt/nuxt/issues/18376",0.7320087,{"description":2882,"labels":2883,"number":2887,"owner":2875,"repository":2875,"state":2876,"title":2888,"updated_at":2889,"url":2890,"score":2891},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.14.0\n- Nuxt Version: 3.17.4\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: bun@1.2.9\n- Builder: -\n- User Config: compatibilityDate, devtools, nitro, modules\n- Runtime Modules: nitro-cloudflare-dev@0.2.2\n- Build Modules: -\n\n### Reproduction\n\n- Repo: https://github.com/serhii-chernenko/nuxt-usefetch-caching-issue\n- Demo: https://nuxt-usefetch-caching-issue.nuxt-test.workers.dev\n\n### Describe the bug\n\n# useFetch caching issue\n\nI see that Nuxt `3.17.4` has \"major\" imporvements regarding the usage of `useFetch` and `useAsyncData` composables that has to significantly improve performance by sharing and caching data without a requirement of usage `getCachedData`.\nThe same `key` value is enough.\n\nI wanted to play with this a bit and prepared this demo repo to explain my issue.\n\n- Repo: https://github.com/serhii-chernenko/nuxt-usefetch-caching-issue\n- Demo: https://nuxt-usefetch-caching-issue.nuxt-test.workers.dev\n- Nuxt updates: https://nuxt.com/blog/v3-17\n\n## Issue explanation\n\nI'm expecting that once I used `useFetch` with a key, e.g. `items`, it has to be cached and shared across all pages and components which use fetching for the same `key` (`items`).\n\nI prepared 2 pages:\n- Home page `/`\n- Items page `/items`\n\nThe `pages/items.vue` component includes the `components/Items.vue` component twice.\n\nIn the `Items.vue` I just used `useFetch`:\n```ts\nconst { data: items, error, refresh } = await useFetch(\"/api/items\", {\n key: \"items\",\n default: () => [],\n});\n```\n\nAnd there are 2 issue actually.\n\n### Network request retriggered when page accessed\n\nWhen I go to https://nuxt-usefetch-caching-issue.nuxt-test.workers.dev and then to https://nuxt-usefetch-caching-issue.nuxt-test.workers.dev/items, I see in the Network tab that the request sends again, every time. I kinda didn't expect this, because I guessed that the data has to be provided by cached data already by the `key`.\n\n\n\n**Note here**\nWhile the `Items.vue` inserted to the `pages/items.vue` twice, I added:\n```ts\ndedupe: 'defer`\n```\nto avoid duplicated request at the same time.\n\nIs this an expected behavior? Because I guessed once it's cached, there's no new requests expected until manually refreshed at least.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2884],{"name":2885,"color":2886},"pending triage","E99695",32186,"Network request is sent even with the same `key` for `useFetch`","2025-05-22T18:10:31Z","https://github.com/nuxt/nuxt/issues/32186",0.7585429,{"description":2893,"labels":2894,"number":2899,"owner":2875,"repository":2875,"state":2900,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### Environment\n\n- Operating System: `Linux`\r\n- Node Version: `v16.17.1`\r\n- Nuxt Version: `3.2.2`\r\n- Nitro Version: `2.2.2`\r\n- Package Manager: `npm@8.15.0`\r\n- Builder: `vite`\r\n- User Config: `runtimeConfig`, `modules`, `css`, `app`, `experimental`, `imports`, `nitro`, `typescript`\r\n- Runtime Modules: `@pinia/nuxt@0.4.7`, `@nuxtjs/tailwindcss@6.4.1`\r\n- Build Modules: \n\n### Reproduction\n\n\r\n```\r\n// before refresh call asyncData a pending must be false\r\nconst { pending: isLoadingOne, refresh: fetchOne } = useFetch('https://jsonplaceholder.typicode.com/todos/1', { immediate: false });\r\n\r\n// before refresh call asyncData a pending must be false | perhaps a controversial case\r\nconst { pending: isLoadingTwo, refresh: fetchTwo } = await useFetch('https://jsonplaceholder.typicode.com/todos/2', { immediate: false });\r\n```\r\n\r\nSee full code: https://stackblitz.com/edit/nuxt-starter-9uxzmd?file=app.vue\n\n### Describe the bug\n\nUntil the request is forcibly invoked, it is assumed that the waiting status should be false.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2895,2898],{"name":2896,"color":2897},"3.x","29bc7f",{"name":2885,"color":2886},19218,"closed","`useFetch/useAsyncData`: BUG: when `immediate: false`, then `pending` is `true` before call `execute/refresh` (must to be false)","2023-12-20T16:49:10Z","https://github.com/nuxt/nuxt/issues/19218",0.72195333,{"description":2906,"labels":2907,"number":2910,"owner":2875,"repository":2875,"state":2900,"title":2911,"updated_at":2912,"url":2913,"score":2914},"### 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_",[2908,2909],{"name":2896,"color":2897},{"name":2885,"color":2886},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.72739774,{"description":2916,"labels":2917,"number":2924,"owner":2875,"repository":2875,"state":2900,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### Environment\r\n\r\n```bash\r\nNuxt project info: 0:30:28\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.10.0\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.4\r\n- Package Manager: pnpm@8.15.4\r\n- Builder: -\r\n- User Config: typescript, modules, app, features, experimental, css, postcss, recaptcha, pwa, devtools, vite\r\n- Runtime Modules: @unocss/nuxt@0.58.6, @nuxtjs/i18n@8.1.1, @vueuse/nuxt@10.9.0, @vite-pwa/nuxt@0.6.0\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-lpzonl?file=app.vue,styles%2Fglobal.css,nuxt.config.ts\r\n\r\n### Describe the bug\r\n\r\nThere is no way to change `hideDelay` from the loading indicator component, and so we need to await ~1s to hide the indicator: page end + 500ms in `hideDelay` + 400ms in the css transition.\r\n\r\nNuxtLoadingIndicator should expose the `hideDelay` or `force` prop without needing to rewrite it, `hideDelay: 0` should be the default value.\r\n\r\nYou can check the SB reproduction:\r\n- open preview in a new tab\r\n- check the delay when navigating\r\n- open devtools and find `_nuxt/node_modules/nuxt/dist/app/composables/loading-indicator.js?v=\u003Csome_version>` in the source tab\r\n- add a breakpoint in L9\r\n- refresh the page and set `hideDelay` to 0\r\n- navigate again\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2918,2921],{"name":2919,"color":2920},"enhancement","8DEF37",{"name":2922,"color":2923},"🍰 p2-nice-to-have","0E8A16",26637,"weird behavior with loading indicator component","2025-04-03T15:17:07Z","https://github.com/nuxt/nuxt/issues/26637",0.73756593,{"description":2930,"labels":2931,"number":2935,"owner":2875,"repository":2875,"state":2900,"title":2936,"updated_at":2937,"url":2938,"score":2939},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v18.18.2\r\n- Nuxt Version: 3.8.0\r\n- CLI Version: 3.9.1\r\n- Nitro Version: 2.7.0\r\n- Package Manager: npm@8.19.4\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/~/github.com/pguilbert/nuxt-await-tests\r\n\r\nNavigation from \"Home\" to \"noawait-default\" should be identical to the one from \"Home\" to \"await-default\" (but twice faster because of the parallelization). Without `{lazy: true}` \"Loading...\" should not be shown to the user.\r\n\r\n### Describe the bug\r\n\r\nThe documentation states the following:\r\n> By default, data fetching composables will wait for the resolution of their asynchronous function before navigating to a new page by using Vue’s Suspense. This feature can be ignored on client-side navigation with the lazy option. In that case, you will have to manually handle loading state using the pending value. (https://nuxt.com/docs/getting-started/data-fetching#useasyncdata ) \r\n\r\nIt appears that this is not the case when `useAsyncData` is not awaited. Currently, my understanding is that: \r\n```ts\r\nconst asyncData = useAsyncData(\r\n () => ...\r\n);\r\n```\r\n\r\nis equivalent to \r\n```ts\r\nconst asyncData = useAsyncData(\r\n () => ...,\r\n { lazy: true}\r\n);\r\n```\r\n\r\n\r\nThank you for your help 🙏\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2932,2933,2934],{"name":2896,"color":2897},{"name":2866,"color":2867},{"name":2885,"color":2886},24542,"`useAsyncData` is not blocking the client navigation","2023-12-01T08:07:15Z","https://github.com/nuxt/nuxt/issues/24542",0.7393294,{"labels":2941,"number":2946,"owner":2875,"repository":2875,"state":2900,"title":2947,"updated_at":2948,"url":2949,"score":2950},[2942,2943],{"name":2919,"color":2920},{"name":2944,"color":2945},"2.x","d4c5f9",9719,"Delay Smart Prefetch until OnNuxtReady has been dispatched","2023-02-15T00:18:51Z","https://github.com/nuxt/nuxt/issues/9719",0.74235916,{"description":2952,"labels":2953,"number":2954,"owner":2875,"repository":2875,"state":2900,"title":2955,"updated_at":2956,"url":2957,"score":2958},"### Discussed in https://github.com/nuxt/nuxt/discussions/16231\r\n\r\n\u003Cdiv type='discussions-op-text'>\r\n\r\n\u003Csup>Originally posted by **jshimkoski** December 1, 2022\u003C/sup>\r\nAfter a production build, over 100 `\u003Clink rel=\"modulepreload\">...` and `\u003Clink rel=\"preload\">...` tags are injected into the head of the page. They are killing initial page load performance of the app in a major way.\r\n\r\nFor reference, the Nuxt 2 version of the app can load in about 1 second (with a bundle about 3 times the size of the Nuxt 3 bundle). In Nuxt 3, the same app takes close to 4 seconds to load. I've isolated the issue to the excessive inclusion of these preload `link` elements.\r\n\r\nIs there a quick configuration option or some other solution that will disable or limit the amount of these elements that are generated?\u003C/div>",[],18600,"How to disable modulepreload/prefetch or limit the amount of requests?","2023-02-03T13:01:59Z","https://github.com/nuxt/nuxt/issues/18600",0.74262863,{"labels":2960,"number":2962,"owner":2875,"repository":2875,"state":2900,"title":2963,"updated_at":2964,"url":2965,"score":2966},[2961],{"name":2944,"color":2945},6488,"Nuxt head() does not wait asyncData in server side ","2023-01-18T21:49:16Z","https://github.com/nuxt/nuxt/issues/6488",0.7461973,{"description":2968,"labels":2969,"number":2972,"owner":2875,"repository":2875,"state":2900,"title":2973,"updated_at":2974,"url":2975,"score":2976},"### Environment\r\n\r\n- Operating System: Windows_NT\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.7.4\r\n- CLI Version: 3.9.0\r\n- Nitro Version: 2.6.3\r\n- Package Manager: npm@9.8.1\r\n- Builder: -\r\n- User Config: devtools, modules, build, typescript, supabase\r\n- Runtime Modules: @nuxtjs/supabase@1.1.3\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nUsing the following code...\r\n\r\n```vue\r\n\u003Ctemplate>\r\n {{ pending }}\r\n\r\n \u003Cinput\r\n @click=\"refresh()\"\r\n type=\"button\"\r\n value=\"Refresh\"\r\n />\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst { data, error, pending, status, refresh } = useFetch(\r\n \"https://jsonplaceholder.typicode.com/todos/1\",\r\n { immediate: false }\r\n);\r\n\u003C/script>\r\n```\r\n\r\n...you will notice that \"pending\" will remain **true** until the request is triggered at least once.\r\n\r\n### Describe the bug\r\n\r\nMaybe it is by design, but I have the feeling pending should stay **false** while not fetching, even in not immediate mode.\r\nA workaround is to use \"status === pending\" in template loaders, but I feel it less straightforward than \"pending\".\r\n\r\n### Additional context\r\n\r\nI hope my English is understandable, and thank you for your amazing work.\r\n\r\n### Logs\r\n\r\n_No response_",[2970,2971],{"name":2896,"color":2897},{"name":2885,"color":2886},23562,"useAsyncData with { immediate: false } returns pending = \"true\" until fired at least once.","2023-10-07T11:05:38Z","https://github.com/nuxt/nuxt/issues/23562",0.747808,["Reactive",2978],{},["Set"],["ShallowReactive",2981],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fd355FclIb7jE3gWlmNIHfwVwAFy5_M_6ePTi4GbPVHk":-1},"/nuxt/icon/151"]