diff --git a/examples/vue/2.6-basic/src/Post.vue b/examples/vue/2.6-basic/src/Post.vue
index ba11b03b4e8..3ddd7ebc843 100644
--- a/examples/vue/2.6-basic/src/Post.vue
+++ b/examples/vue/2.6-basic/src/Post.vue
@@ -4,10 +4,13 @@ import { useQuery } from '@tanstack/vue-query'
 
 import { Post } from './types'
 
-const fetcher = async (id: number): Promise<Post> =>
-  await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
-    (response) => response.json(),
+const fetcher = async (id: number): Promise<Post> => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/posts/${id}`,
   )
+  if (!response.ok) throw new Error('Failed to fetch post')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostDetails',
diff --git a/examples/vue/2.6-basic/src/Posts.vue b/examples/vue/2.6-basic/src/Posts.vue
index 17c7e5fe315..15b97d9cc28 100644
--- a/examples/vue/2.6-basic/src/Posts.vue
+++ b/examples/vue/2.6-basic/src/Posts.vue
@@ -4,10 +4,11 @@ import { useQuery } from '@tanstack/vue-query'
 
 import type { Post } from './types'
 
-const fetcher = async (): Promise<Post[]> =>
-  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
-    response.json(),
-  )
+const fetcher = async (): Promise<Post[]> => {
+  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+  if (!response.ok) throw new Error('Failed to fetch posts')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostsList',
diff --git a/examples/vue/2.7-basic/src/Post.vue b/examples/vue/2.7-basic/src/Post.vue
index ce8dc160b69..35c22db5842 100644
--- a/examples/vue/2.7-basic/src/Post.vue
+++ b/examples/vue/2.7-basic/src/Post.vue
@@ -4,10 +4,13 @@ import { useQuery } from '@tanstack/vue-query'
 
 import { Post } from './types'
 
-const fetcher = async (id: number): Promise<Post> =>
-  await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
-    (response) => response.json(),
+const fetcher = async (id: number): Promise<Post> => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/posts/${id}`,
   )
+  if (!response.ok) throw new Error('Failed to fetch post')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostDetails',
diff --git a/examples/vue/2.7-basic/src/Posts.vue b/examples/vue/2.7-basic/src/Posts.vue
index 81062b371a3..35cb1b0c33c 100644
--- a/examples/vue/2.7-basic/src/Posts.vue
+++ b/examples/vue/2.7-basic/src/Posts.vue
@@ -4,10 +4,11 @@ import { useQuery } from '@tanstack/vue-query'
 
 import type { Post } from './types'
 
-const fetcher = async (): Promise<Post[]> =>
-  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
-    response.json(),
-  )
+const fetcher = async (): Promise<Post[]> => {
+  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+  if (!response.ok) throw new Error('Failed to fetch posts')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostsList',
diff --git a/examples/vue/basic/src/Post.vue b/examples/vue/basic/src/Post.vue
index 2c686c0e668..85354ec1724 100644
--- a/examples/vue/basic/src/Post.vue
+++ b/examples/vue/basic/src/Post.vue
@@ -4,10 +4,13 @@ import { useQuery } from '@tanstack/vue-query'
 
 import type { Post } from './types'
 
-const fetcher = async (id: number): Promise<Post> =>
-  await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
-    (response) => response.json(),
+const fetcher = async (id: number): Promise<Post> => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/posts/${id}`,
   )
+  if (!response.ok) throw new Error('Failed to fetch post')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostDetails',
diff --git a/examples/vue/basic/src/Posts.vue b/examples/vue/basic/src/Posts.vue
index 4ad218407ca..320fb14d235 100644
--- a/examples/vue/basic/src/Posts.vue
+++ b/examples/vue/basic/src/Posts.vue
@@ -4,10 +4,11 @@ import { useQuery } from '@tanstack/vue-query'
 
 import type { Post } from './types'
 
-const fetcher = async (): Promise<Array<Post>> =>
-  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
-    response.json(),
-  )
+const fetcher = async (): Promise<Array<Post>> => {
+  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+  if (!response.ok) throw new Error('Failed to fetch posts')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostsList',
diff --git a/examples/vue/dependent-queries/src/Post.vue b/examples/vue/dependent-queries/src/Post.vue
index cc7c5b4cd84..9c9bf2961c3 100644
--- a/examples/vue/dependent-queries/src/Post.vue
+++ b/examples/vue/dependent-queries/src/Post.vue
@@ -4,15 +4,21 @@ import { skipToken, useQuery } from '@tanstack/vue-query'
 
 import type { Author, Post } from './types'
 
-const fetchPost = async (id: number): Promise<Post> =>
-  await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
-    (response) => response.json(),
+const fetchPost = async (id: number): Promise<Post> => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/posts/${id}`,
   )
+  if (!response.ok) throw new Error('Failed to fetch post')
+  return await response.json()
+}
 
-const fetchAuthor = async (id: number): Promise<Author> =>
-  await fetch(`https://jsonplaceholder.typicode.com/users/${id}`).then(
-    (response) => response.json(),
+const fetchAuthor = async (id: number): Promise<Author> => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/users/${id}`,
   )
+  if (!response.ok) throw new Error('Failed to fetch author')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostDetails',
diff --git a/examples/vue/dependent-queries/src/Posts.vue b/examples/vue/dependent-queries/src/Posts.vue
index 4ad218407ca..320fb14d235 100644
--- a/examples/vue/dependent-queries/src/Posts.vue
+++ b/examples/vue/dependent-queries/src/Posts.vue
@@ -4,10 +4,11 @@ import { useQuery } from '@tanstack/vue-query'
 
 import type { Post } from './types'
 
-const fetcher = async (): Promise<Array<Post>> =>
-  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
-    response.json(),
-  )
+const fetcher = async (): Promise<Array<Post>> => {
+  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+  if (!response.ok) throw new Error('Failed to fetch posts')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostsList',
diff --git a/examples/vue/nuxt3/app.vue b/examples/vue/nuxt3/app.vue
index aefa25002c5..1bf68cbaba7 100644
--- a/examples/vue/nuxt3/app.vue
+++ b/examples/vue/nuxt3/app.vue
@@ -5,10 +5,11 @@
 <script setup lang="ts">
 import { useQuery } from '@tanstack/vue-query'
 
-const fetcher = async () =>
-  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
-    response.json(),
-  )
+const fetcher = async () => {
+  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+  if (!response.ok) throw new Error('Failed to fetch posts')
+  return await response.json()
+}
 
 const { data, suspense } = useQuery({ queryKey: ['test'], queryFn: fetcher })
 
diff --git a/examples/vue/persister/src/Post.vue b/examples/vue/persister/src/Post.vue
index cf4c0ffc721..af70ad5385c 100644
--- a/examples/vue/persister/src/Post.vue
+++ b/examples/vue/persister/src/Post.vue
@@ -6,10 +6,13 @@ import { useQuery } from '@tanstack/vue-query'
 import { experimental_createQueryPersister } from '@tanstack/query-persist-client-core'
 import type { Post } from './types'
 
-const fetcher = async (id: number): Promise<Post> =>
-  await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
-    (response) => response.json(),
+const fetcher = async (id: number): Promise<Post> => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/posts/${id}`,
   )
+  if (!response.ok) throw new Error('Failed to fetch post')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostDetails',
diff --git a/examples/vue/persister/src/Posts.vue b/examples/vue/persister/src/Posts.vue
index 1c620a65d4c..df152d05cb8 100644
--- a/examples/vue/persister/src/Posts.vue
+++ b/examples/vue/persister/src/Posts.vue
@@ -5,13 +5,12 @@ import { experimental_createQueryPersister } from '@tanstack/query-persist-clien
 
 import type { Post } from './types'
 
-const fetcher = async (): Promise<Array<Post>> =>
-  await fetch('https://jsonplaceholder.typicode.com/posts').then(
-    (response) =>
-      new Promise((resolve) =>
-        setTimeout(() => resolve(response.json()), 1000),
-      ),
-  )
+const fetcher = async (): Promise<Array<Post>> => {
+  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+  if (!response.ok) throw new Error('Failed to fetch posts')
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostsList',
diff --git a/examples/vue/simple/src/App.vue b/examples/vue/simple/src/App.vue
index 4d4c447fe31..5e6f8bcbb66 100644
--- a/examples/vue/simple/src/App.vue
+++ b/examples/vue/simple/src/App.vue
@@ -10,9 +10,11 @@ export default defineComponent({
     const { data, error, isFetching, isPending } = useQuery({
       queryKey: ['repoData'],
       async queryFn() {
-        return await fetch('https://api.github.com/repos/Tanstack/query').then(
-          (response) => response.json(),
+        const response = await fetch(
+          'https://api.github.com/repos/Tanstack/query',
         )
+        if (!response.ok) throw new Error('Failed to fetch repo data')
+        return await response.json()
       },
     })