fix(nuxt): respect custom timeout in useFetch (#24364)

docs/3.api/2.composables/use-fetch.md

@@ -80,6 +80,7 @@ const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
   - `body`: Request body - automatically stringified (if an object is passed).
   - `headers`: Request headers.
   - `baseURL`: Base URL for the request.
+  - `timeout`: Milliseconds to automatically abort request
 
 ::callout
 All fetch options can be given a `computed` or `ref` value. These will be watched and new requests made automatically with any new values if they are updated.

packages/nuxt/src/app/composables/fetch.ts

@@ -140,6 +140,17 @@ export function useFetch<
     controller?.abort?.()
     controller = typeof AbortController !== 'undefined' ? new AbortController() : {} as AbortController
 
+    /**
+     * Workaround for `timeout` not working due to custom abort controller
+     * TODO: remove this when upstream issue is resolved
+     * @see https://github.com/unjs/ofetch/issues/326
+     * @see https://github.com/unjs/ofetch/blob/bb2d72baa5d3f332a2185c20fc04e35d2c3e258d/src/fetch.ts#L152
+     */
+    const timeoutLength = toValue(opts.timeout)
+    if (timeoutLength) {
+      setTimeout(() => controller.abort(), timeoutLength)
+    }
+
     let _$fetch = opts.$fetch || globalThis.$fetch
 
     // Use fetch with request context and headers for server direct API calls

test/nuxt/composables.test.ts

@@ -266,6 +266,16 @@ describe('useFetch', () => {
     await useFetch('/api/test', { params: { id: ref('3') } }, '')
     expect.soft(getPayloadEntries()).toBe(baseCount + 3)
   })
+
+  it('should timeout', async () => {
+    const { status, error } = await useFetch(
+      () => new Promise(resolve => setTimeout(resolve, 5000)),
+      { timeout: 1 }
+    )
+    await new Promise(resolve => setTimeout(resolve, 2))
+    expect(status.value).toBe('error')
+    expect(error.value).toMatchInlineSnapshot('[Error: [GET] "[object Promise]": <no response> The operation was aborted.]')
+  })
 })
 
 describe('errors', () => {