\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_",[1984,1987,1990,1993],{"name":1985,"color":1986},"enhancement","8DEF37",{"name":1988,"color":1989},"workaround available","11376d",{"name":1991,"color":1992},"upstream","E8A36D",{"name":1994,"color":1995},"馃嵃 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.68798834,{"labels":2004,"number":2014,"owner":1997,"repository":1997,"state":2015,"title":2016,"updated_at":2017,"url":2018,"score":2019},[2005,2008,2011],{"name":2006,"color":2007},"3.x","29bc7f",{"name":2009,"color":2010},"pending triage","E99695",{"name":2012,"color":2013},"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.66524017,{"description":2021,"labels":2022,"number":2025,"owner":1997,"repository":1997,"state":2015,"title":2026,"updated_at":2027,"url":2028,"score":2029},"### 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```",[2023,2024],{"name":2009,"color":2010},{"name":2012,"color":2013},30185,"Page refresh bug","2025-02-03T14:25:51Z","https://github.com/nuxt/nuxt/issues/30185",0.6692856,{"labels":2031,"number":2034,"owner":1997,"repository":1997,"state":2015,"title":2035,"updated_at":2036,"url":2037,"score":2038},[2032,2033],{"name":2006,"color":2007},{"name":2009,"color":2010},13051,"useFetch and useAsyncData can't works in event","2023-01-19T16:42:40Z","https://github.com/nuxt/nuxt/issues/13051",0.6745777,{"description":2040,"labels":2041,"number":2044,"owner":1997,"repository":1997,"state":2015,"title":2045,"updated_at":2046,"url":2047,"score":2048},"### 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_",[2042,2043],{"name":2006,"color":2007},{"name":2009,"color":2010},22917,"useFetch: repeat request","2023-08-31T10:05:49Z","https://github.com/nuxt/nuxt/issues/22917",0.6751733,{"description":2050,"labels":2051,"number":2054,"owner":1997,"repository":1997,"state":2015,"title":2055,"updated_at":2056,"url":2057,"score":2058},"### 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_",[2052,2053],{"name":2006,"color":2007},{"name":2009,"color":2010},24624,"fetch mixes state between seperated components","2023-12-07T10:14:59Z","https://github.com/nuxt/nuxt/issues/24624",0.67622125,{"labels":2060,"number":2066,"owner":1997,"repository":1997,"state":2015,"title":2067,"updated_at":2068,"url":2069,"score":2070},[2061,2062,2065],{"name":1985,"color":1986},{"name":2063,"color":2064},"documentation","5319e7",{"name":2006,"color":2007},13386,"`useFetch` type return","2023-01-19T16:54:20Z","https://github.com/nuxt/nuxt/issues/13386",0.67698866,{"labels":2072,"number":2076,"owner":1997,"repository":1997,"state":2015,"title":2077,"updated_at":2078,"url":2079,"score":2080},[2073,2074,2075],{"name":2006,"color":2007},{"name":2009,"color":2010},{"name":2012,"color":2013},13878,"`useFetch`'s data type is `any` in `\u003Ctemplate>` but correct in `\u003Cscript>`","2023-01-19T17:13:45Z","https://github.com/nuxt/nuxt/issues/13878",0.68023384,{"description":2082,"labels":2083,"number":2086,"owner":1997,"repository":1997,"state":2015,"title":2087,"updated_at":2088,"url":2089,"score":2090},"### Environment\r\n\r\nLinux,\r\nNuxt 3.0\r\nNode 16\r\n\r\n### Reproduction\r\n\r\nStackblitz reproduction is not possible in this case, so I will provide you with simplified instructions. \r\n\r\nLet's create two pages. \r\nsimple.vue:\r\n```vue\r\n\u003Cscript setup>\r\n const { data, pending } = useLazyFetch(\"https://api.publicapis.org/entries\");\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003Cdiv v-if=\"pending\">loading...\u003C/div>\r\n \u003Cdiv v-else>{{ data }}\u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nadvanced.vue\r\n```vue\r\n\u003Cscript setup>\r\n const devData = ref({});\r\n const isPending = ref(false);\r\n\r\n const fetchApi = () => {\r\n const { data, pending } = useLazyFetch(\"https://api.publicapis.org/entries\");\r\n devData.value = data.value;\r\n isPending.value = pending.value;\r\n };\r\n\r\n fetchApi();\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv v-if=\"isPending\">loading...\u003C/div>\r\n \u003Cdiv v-else>{{ devData }}\u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nOpen page (do not navigate in app, always hard refresh as you would copy paste URL) - in order to ensure SSR.\r\n\r\nIf you are on _**advanced**_ page, you will get hydration mismatch error. If you disable Javascript in browser, you won't ever quit \"loading\" div, you will not see fetched results. \r\nStrangely, on **_simple_** page, every time you refresh, you will get correct result. Even with disabled javascript.\r\n\r\n_**Adding watcher inside fetchApi does not resolve this issue.**_\r\n\r\nThe problem is when we build advanced application with SEO and move code to other places, for example pinia SETUP store, we can't use useLazyFetch. If we disable javascript (seo requirement) in browser we always get blank page. \r\nIt would be all understandable, but I just can't understand why this is working when we put useLazyFetch inside script setup.\r\n\r\n### Describe the bug\r\n\r\n- useLazyFetch used inside function gives hydration mismatch.\r\n- It is not possible to \"listen to\" pending state when we use useLazyFetch inside function. \r\n- Even if we would succeed with watcher, the template with javascript turned off would not update on initial page load (but if you use it top-level in script setup, on initial load you you will get correct data and you won't notice pending placeholder).\r\n\r\nIf all of the above issues are not bugs, how we can achieve desired behavior (it has to be non-blocking fetch)? Documentation in data section refers only to super simple basic examples.\r\n\r\n\r\n### Additional context\r\n\r\nIt would be also nice to update documentation to show more real-life scenario considering data fetching (I can help with that, but first I have to understand how it works)\r\n\r\n### Logs\r\n\r\n_No response_",[2084,2085],{"name":2006,"color":2007},{"name":2009,"color":2010},18454,"useLazyFetch gives hydration mismatch when used inside function","2023-01-23T16:17:27Z","https://github.com/nuxt/nuxt/issues/18454",0.68084776,{"description":2092,"labels":2093,"number":2099,"owner":1997,"repository":2100,"state":2015,"title":2101,"updated_at":2102,"url":2103,"score":2104},"### Description\n\nIt's shorter and can save traffic.\n\n### Additional context\n\n_No response_",[2094,2096],{"name":1985,"color":2095},"a2eeef",{"name":2097,"color":2098},"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.6850904,["Reactive",2106],{},["Set"],["ShallowReactive",2109],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"eT1hWJxfeX_Lz7FiglZPtTH-jDA3vD2vBDc6N2ZtcVE":-1},"/nuxt/nuxt/15741"]