\r\n\u003C/template>\r\n\u003Cscript setup>\r\nconst show = ref(false)\r\n\u003C/script>\r\n\u003Cscript setup>\r\nconst {error, data} = await useFetch('https://ord.uib.no/bm/fil/article100new.json')\r\n\u003C/script>\r\n```\r\n\r\n\r\n#### **`app.vue`**\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cbutton @click=\"show=!show\">toggle\u003C/button>\r\n \u003CPage v-if=\"show\"/>\r\n\u003C/template>\r\n\u003Cscript setup>\r\nconst show = ref(false)\r\n\u003C/script>\r\n```\r\n\r\nAfter the page has finished loading in the browser, disconnect from the internet, or select 'offline' in the browser devtools. Then click the button to render the Page-component. The error message will be \"\u003Cno response> Failed to fetch\", with status code 500.\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nWhen internet connection is lost, useFetch returns it as an internal server error when using an external API:\r\n{ \"cause\": \"TypeError: Failed to fetch\", \"message\": \"[GET] \\\"https://ord.uib.no/bm/fil/article100new.json\\\": \u003Cno response> Failed to fetch\", \"name\": \"Error\", \"statusCode\": 500 }\r\n\r\nIn the browser devtools I see an error code in fetch.js that makes more sense: net::ERR_INTERNET_DISCONNECTED, but I'm unable to capture this with useFetch.\r\n\r\n### Additional context\r\nThe error code is 500 even if SSR is disabled.\r\n\r\n### Logs\r\n\r\n_No response_",[2865,2868,2871,2874],{"name":2866,"color":2867},"enhancement","8DEF37",{"name":2869,"color":2870},"workaround available","11376d",{"name":2872,"color":2873},"upstream","E8A36D",{"name":2875,"color":2876},"馃嵃 p2-nice-to-have","0E8A16",24334,"nuxt","open","Misleading error message in useFetch","2024-06-30T11:06:51Z","https://github.com/nuxt/nuxt/issues/24334",0.6865207,{"labels":2885,"number":2895,"owner":2878,"repository":2878,"state":2896,"title":2897,"updated_at":2898,"url":2899,"score":2900},[2886,2889,2892],{"name":2887,"color":2888},"3.x","29bc7f",{"name":2890,"color":2891},"pending triage","E99695",{"name":2893,"color":2894},"needs reproduction","FBCA04",14552,"closed","^3.0.0-rc.6 ----- useAsyncData or useFetch . ","2023-01-19T17:36:57Z","https://github.com/nuxt/nuxt/issues/14552",0.6725224,{"description":2902,"labels":2903,"number":2906,"owner":2878,"repository":2878,"state":2896,"title":2907,"updated_at":2908,"url":2909,"score":2910},"### Environment\n\nnuxt@3.7.0\r\n\r\n\n\n### Reproduction\n\n[playground](https://stackblitz.com/edit/nuxt-starter-cxgv9u?file=app.vue)\r\n\r\nhttps://github.com/nuxt/nuxt/assets/82227884/360cf714-1d76-47b7-90d0-4432b62f7c51\n\n### Describe the bug\n\nEach call will accumulate the number of requests.\r\n\r\n```vue\r\n\r\n\u003Cscript setup>\r\nconst data = reactive({\r\n foo: {},\r\n});\r\n\r\nconst onSubmit = () => {\r\n data.foo = {};\r\n\r\n useFetch('https://api.test.com/test', {\r\n method: 'POST',\r\n body: { data },\r\n });\r\n};\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cbutton @click=\"onSubmit\">Btn\u003C/button>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2904,2905],{"name":2887,"color":2888},{"name":2890,"color":2891},22917,"useFetch: repeat request","2023-08-31T10:05:49Z","https://github.com/nuxt/nuxt/issues/22917",0.67426383,{"description":2912,"labels":2913,"number":2919,"owner":2878,"repository":2920,"state":2896,"title":2921,"updated_at":2922,"url":2923,"score":2924},"### Description\n\nIt's shorter and can save traffic.\n\n### Additional context\n\n_No response_",[2914,2916],{"name":2866,"color":2915},"a2eeef",{"name":2917,"color":2918},"v3","49DCB8",3250,"ui","Use `foo-(--bar)` instead of `foo-[var(--bar)]` for tailwindcss classes","2025-02-07T10:24:17Z","https://github.com/nuxt/ui/issues/3250",0.675752,{"description":2926,"labels":2927,"number":2930,"owner":2878,"repository":2878,"state":2896,"title":2931,"updated_at":2932,"url":2933,"score":2934},"### Environment\n\n*package.json*\n```js\n{\n \"name\": \"nuxt-app\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"nuxt build\",\n \"dev\": \"nuxt dev\",\n \"generate\": \"nuxt generate\",\n \"preview\": \"nuxt preview\",\n \"postinstall\": \"nuxt prepare\"\n },\n \"dependencies\": {\n \"@prisma/nuxt\": \"^0.1.2\",\n \"@vueuse/core\": \"^12.0.0\",\n \"@vueuse/nuxt\": \"^12.0.0\",\n \"nuxt\": \"^3.14.1592\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n },\n \"devDependencies\": {\n \"@nuxt/devtools\": \"npm:@nuxt/devtools-edge@latest\",\n \"@nuxtjs/tailwindcss\": \"^6.12.2\",\n \"@prisma/client\": \"^6.0.1\",\n \"prisma\": \"^6.0.1\"\n }\n}\n\n```\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-uquybs?file=nuxt.config.ts,app.vue\n\n### Describe the bug\n\nI have this code that should submit a form but I added `submit.prevent=\"handleSubmit()\"` so this should stop from refreshing.\n\nI tried to reproduce it on stackblitz however everything is working there (including the devtools) but on my local upon clicking create button the page refreshes.\n\n\n\n```html\n\u003Ctemplate>\n\u003Cform @submit.prevent=\"handleSubmit()\" class=\"w-full\">\n\t\u003Cdiv class=\"mb-4\">\n\t\t\u003Cinput\n\t\t\tv-model=\"form.email\"\n\t\t\ttype=\"email\"\n\t\t\tid=\"email\"\n\t\t\tclass=\"w-full p-3 border border-gray-300 rounded mt-1\"\n\t\t\tplaceholder=\"Email address\"\n\t\t/>\n\t\u003C/div>\n\t\u003Cdiv class=\"mb-6\">\n\t\t\u003Cinput\n\t\t\tv-model=\"form.password\"\n\t\t\ttype=\"password\"\n\t\t\tid=\"password\"\n\t\t\tclass=\"w-full p-3 border border-gray-300 rounded mt-1\"\n\t\t\tplaceholder=\"Password\"\n\t\t/>\n\t\u003C/div>\n\t\u003Cdiv class=\"mb-6\">\n\t\t\u003Cinput\n\t\t\tv-model=\"form.confirm_password\"\n\t\t\ttype=\"confirm_password\"\n\t\t\tid=\"confirm_password\"\n\t\t\tclass=\"w-full p-3 border border-gray-300 rounded mt-1\"\n\t\t\tplaceholder=\"Password Confirmation\"\n\t\t/>\n\t\u003C/div>\n\t\u003Cbutton\n\t\ttype=\"submit\"\n\t\tclass=\"w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-700\"\n\t>\n\t\tCreate\n\t\u003C/button>\n\u003C/form>\n\u003C/template>\n\u003Cscript setup>\nconst handleSubmit = async () => {\n\t\n\tif (form.value.password !== form.value.confirm_password) {\n\t\tconsole.log(\"Passwords do not match\");\n\t\talert(\"Passwords do not match\");\n\t\treturn;\n\t}\n\n\tconsole.log(form.value);\n};\n...\n```\n\nhttps://github.com/user-attachments/assets/18ea3431-cadb-4613-a2a3-4703755f2f91\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2928,2929],{"name":2890,"color":2891},{"name":2893,"color":2894},30185,"Page refresh bug","2025-02-03T14:25:51Z","https://github.com/nuxt/nuxt/issues/30185",0.6780105,{"labels":2936,"number":2939,"owner":2878,"repository":2878,"state":2896,"title":2940,"updated_at":2941,"url":2942,"score":2943},[2937,2938],{"name":2887,"color":2888},{"name":2890,"color":2891},13051,"useFetch and useAsyncData can't works in event","2023-01-19T16:42:40Z","https://github.com/nuxt/nuxt/issues/13051",0.6802194,{"description":2945,"labels":2946,"number":2949,"owner":2878,"repository":2878,"state":2896,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.18.1\r\n- Nuxt Version: 3.8.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: pnpm@8.11.0\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\n\n### Reproduction\n\nhttps://github.com/alisol911/nuxt-fetch-test\r\n```\r\npnpm dlx nuxi@latest init nuxt-fetch-test\r\n```\r\napp.vue\r\n```vue\r\n\u003Ctemplate>\r\n \u003CTest id=\"1\">\u003C/Test>\r\n \u003CTest id=\"2\">\u003C/Test>\r\n \u003CTest id=\"3\">\u003C/Test>\r\n\u003C/template>\r\n\r\n```\r\ncomponent/Test.vue\r\n```vue\r\n\u003Cscript setup>\r\n\r\nconst props = defineProps({\r\n id: String\r\n})\r\n\r\nconst todoId = ref(props.id == \"1\" ? 1 : 2)\r\nconst { data, pending, error } = await useFetch(() => `https://jsonplaceholder.typicode.com/todos/${todoId.value}`)\r\n\r\nonBeforeUpdate(() => {\r\n console.log(`onBeforeUpdate id: ${props.id} todoId: ${todoId.value}`)\r\n})\r\n\r\nonUpdated(() => {\r\n console.log(`onUpdated id: ${props.id} todoId: ${todoId.value}`)\r\n})\r\n\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n id: {{ props.id }}\r\n todoId \u003Cinput v-model=\"todoId\"/>\r\n \r\n \u003Ctext>{{ data }}\u003C/text>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n```\n\n### Describe the bug\n\nthere are three instance of 'Test' component in app.vue\r\nuseFetch does not work correctly on second and third component. Data change affects both component.\r\n\r\n\r\n\r\nFirst component works correctly\r\n\r\n\r\nSecond and third component have same initial value\r\n`\r\nconst todoId = ref(props.id == \"1\" ? 1 : 2)\r\n`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2947,2948],{"name":2887,"color":2888},{"name":2890,"color":2891},24624,"fetch mixes state between seperated components","2023-12-07T10:14:59Z","https://github.com/nuxt/nuxt/issues/24624",0.6809752,{"labels":2955,"number":2961,"owner":2878,"repository":2878,"state":2896,"title":2962,"updated_at":2963,"url":2964,"score":2965},[2956,2957,2960],{"name":2866,"color":2867},{"name":2958,"color":2959},"documentation","5319e7",{"name":2887,"color":2888},13386,"`useFetch` type return","2023-01-19T16:54:20Z","https://github.com/nuxt/nuxt/issues/13386",0.68478036,{"description":2967,"labels":2968,"number":2972,"owner":2878,"repository":2878,"state":2896,"title":2973,"updated_at":2974,"url":2975,"score":2976},"### Environment\r\n\r\nNuxt project info:\r\n\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v18.13.0`\r\n- Nuxt Version: `3.2.2`\r\n- Nitro Version: `2.2.2`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `modules`, `buildModules`, `pwa`, `css`, `purgecss`, `vite`, `nitro`, `runtimeConfig`, `experimental`, `app`, `sourcemap`\r\n- Runtime Modules: `@vueuse/nuxt@9.13.0`, `@pinia/nuxt@0.4.7`\r\n- Build Modules: `@nuxtjs/eslint-module@3.1.0`, `nuxt-purgecss@2.0.0`\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nI have a home page and I want to call two fetch requests and pass the results to a component.\r\n\r\npages/Index.vue\r\n```vue\r\n\u003Ctemplate>\r\n \u003CLazyHome\r\n :categories-request=\"categoriesRequest\"\r\n :locations-request=\"locationsRequest\"\r\n />\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport {fetchCategories, fetchLocations} from '~/services/home';\r\n\r\nconst categoriesRequest = ref({pending: true, error: null, data: null});\r\nconst locationsRequest = ref({pending: true, error: null, data: null});\r\n\r\nconst res = await Promise.all([fetchCategories(), fetchLocations({filter: 0})]);\r\n\r\nif (res[0].error.value || res[1].error.value) {\r\n showError(res[0].error.value || res[1].error.value);\r\n} else {\r\n categoriesRequest.value = res[0];\r\n locationsRequest.value = res[1];\r\n}\r\n\u003C/script>\r\n```\r\n\r\nnow let's see what are `fetchCategories` and `fetchLocations` functions\r\n\r\nservices/home.js\r\n```js\r\nimport {useEnv} from '~/utils/use-env';\r\n\r\nexport const fetchCategories = () => {\r\n const mainApi = useEnv('mainApi');\r\n\r\n return useFetch(\r\n `${mainApi}/homepage/categories`,\r\n {\r\n method: 'POST',\r\n server: true,\r\n }\r\n );\r\n};\r\n\r\nexport const fetchLocations = (payload = {}) => {\r\n const mainApi = useEnv('mainApi');\r\n\r\n return useFetch(\r\n `${mainApi}/homepage/locations`,\r\n {\r\n method: 'POST',\r\n body: payload,\r\n server: true,\r\n }\r\n );\r\n};\r\n```\r\n\r\nand this is the component we used in home page:\r\n\r\ncomponents/home/Index.vue\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"categories-wrapper\">\r\n \u003Cdiv\r\n v-for=\"category in categories\"\r\n :key=\"category.key\"\r\n @click=\"setActiveCategory(category.id)\"\r\n >\r\n {{ category.title }}\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport {fetchLocations} from '~/services/home';\r\n\r\nconst props = defineProps({\r\n categoriesRequest: {type: Object, required: true},\r\n locationsRequest: {type: Object, required: true},\r\n});\r\n\r\nconst categories = computed(() => {\r\n const items = [];\r\n\r\n if (props.categoriesRequest.data) {\r\n items.push(...props.categoriesRequest.data.items);\r\n }\r\n\r\n return [\r\n {\r\n id: 0,\r\n key: 'ALL',\r\n title: '賴賲賴 鬲賵乇賴丕',\r\n },\r\n ...items,\r\n ];\r\n});\r\n\r\nconst currentLocationsRequest = ref(props.locationsRequest);\r\n\r\nconst setActiveCategory = async (categoryId) => {\r\n currentLocationsRequest.value = await fetchLocations({filter: categoryId});\r\n};\r\n\u003C/script>\r\n```\r\n\r\n\r\n### Describe the bug\r\n\r\nwe are expecting `fetchCategories` and `fetchLocations` have been called in server side once and nothing else happens in client side.\r\nand when we click on each category element, `fetchLocations` should be called.\r\n\r\nbut this is not the behavior we actually see.\r\nwe see both function just have been called in client side.\r\nand this happens after upgrading nuxt from `3.0.0` to `3.2.2`.\r\nbefore that it worked fine.\r\nand i have to mention that this behavior happens only in production.\r\nif i change `setActiveCategory` to:\r\n```js\r\nconst setActiveCategory = async (categoryId) => {\r\n console.log(categoryId);\r\n};\r\n```\r\nit works fine again\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2969,2970,2971],{"name":2887,"color":2888},{"name":2890,"color":2891},{"name":2893,"color":2894},19292,"useFetch ssr not working when use same function in page setup and click event on an element after upgrade nuxt to 3.2.2 from 3.0.0","2023-04-05T07:47:53Z","https://github.com/nuxt/nuxt/issues/19292",0.685228,{"labels":2978,"number":2981,"owner":2878,"repository":2878,"state":2896,"title":2982,"updated_at":2983,"url":2984,"score":2985},[2979,2980],{"name":2887,"color":2888},{"name":2890,"color":2891},14465,"Template refs can only be addressed correctly during initial loading","2023-01-19T17:35:46Z","https://github.com/nuxt/nuxt/issues/14465",0.68741,["Reactive",2987],{},["Set"],["ShallowReactive",2990],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$feT1hWJxfeX_Lz7FiglZPtTH-jDA3vD2vBDc6N2ZtcVE":-1},"/nuxt/nuxt/15741"]