diff --git a/docs/3.api/1.composables/use-fetch.md b/docs/3.api/1.composables/use-fetch.md
index 3fcb1dcab7eb..364ff36684c5 100644
--- a/docs/3.api/1.composables/use-fetch.md
+++ b/docs/3.api/1.composables/use-fetch.md
@@ -126,6 +126,9 @@ const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
`useFetch` is a reserved function name transformed by the compiler, so you should not name your own function `useFetch`.
::
+::LinkExample{link="/docs/examples/other/use-custom-fetch-composable"}
+::
+
:ReadMore{link="/docs/getting-started/data-fetching"}
::LinkExample{link="/docs/examples/composables/use-fetch"}
diff --git a/docs/4.examples/8.other/use-custom-fetch-composable.md b/docs/4.examples/8.other/use-custom-fetch-composable.md
new file mode 100644
index 000000000000..939bf9e50d3f
--- /dev/null
+++ b/docs/4.examples/8.other/use-custom-fetch-composable.md
@@ -0,0 +1,9 @@
+---
+toc: false
+---
+
+# Use custom fetch composable
+
+This example shows a convenient wrapper for the useFetch composable from nuxt. It allows you to customize the fetch request with default values and user authentication token.
+
+::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/other/use-custom-fetch-composable" file="composables/useCustomFetch.ts"}
diff --git a/examples/other/use-custom-fetch-composable/app.vue b/examples/other/use-custom-fetch-composable/app.vue
new file mode 100644
index 000000000000..a4b3d6d4a9e5
--- /dev/null
+++ b/examples/other/use-custom-fetch-composable/app.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ Nuxt custom fetch
+
+
+ {{ data }}
+
+
diff --git a/examples/other/use-custom-fetch-composable/composables/useCustomFetch.ts b/examples/other/use-custom-fetch-composable/composables/useCustomFetch.ts
new file mode 100644
index 000000000000..56365292b7b8
--- /dev/null
+++ b/examples/other/use-custom-fetch-composable/composables/useCustomFetch.ts
@@ -0,0 +1,31 @@
+import type { UseFetchOptions } from 'nuxt/app'
+import { defu } from 'defu'
+
+export function useCustomFetch (url: string, options: UseFetchOptions = {}) {
+ const userAuth = useCookie('token')
+ const config = useRuntimeConfig()
+
+ const defaults: UseFetchOptions = {
+ baseURL: config.baseUrl ?? 'https://api.nuxtjs.dev',
+ // cache request
+ key: url,
+
+ // set user token if connected
+ headers: userAuth.value
+ ? { Authorization: `Bearer ${userAuth.value}` }
+ : {},
+
+ onResponse (__ctx) {
+ // return new myBusinessResponse(response._data)
+ },
+
+ onResponseError (__ctx) {
+ // return new myBusinessError(error)
+ }
+ }
+
+ // for nice deep defaults, please use unjs/defu
+ const params = defu(defaults, options)
+
+ return useFetch(url, params)
+}
diff --git a/examples/other/use-custom-fetch-composable/nuxt.config.ts b/examples/other/use-custom-fetch-composable/nuxt.config.ts
new file mode 100644
index 000000000000..1ede6806b692
--- /dev/null
+++ b/examples/other/use-custom-fetch-composable/nuxt.config.ts
@@ -0,0 +1,6 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+ modules: [
+ '@nuxt/ui'
+ ]
+})
diff --git a/examples/other/use-custom-fetch-composable/package.json b/examples/other/use-custom-fetch-composable/package.json
new file mode 100644
index 000000000000..ae4d6000981f
--- /dev/null
+++ b/examples/other/use-custom-fetch-composable/package.json
@@ -0,0 +1,13 @@
+{
+ "name": "example-use-custom-fetch-composable",
+ "private": true,
+ "scripts": {
+ "build": "nuxi build",
+ "dev": "nuxi dev",
+ "start": "nuxi preview"
+ },
+ "devDependencies": {
+ "@nuxt/ui": "^0.3.3",
+ "nuxt": "^3.0.0"
+ }
+}
diff --git a/examples/other/use-custom-fetch-composable/tsconfig.json b/examples/other/use-custom-fetch-composable/tsconfig.json
new file mode 100644
index 000000000000..a746f2a70c28
--- /dev/null
+++ b/examples/other/use-custom-fetch-composable/tsconfig.json
@@ -0,0 +1,4 @@
+{
+ // https://nuxt.com/docs/guide/concepts/typescript
+ "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f61b7db91151..2ad71d386788 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -310,6 +310,15 @@ importers:
specifier: workspace:*
version: link:../../../packages/nuxt
+ examples/other/use-custom-fetch-composable:
+ devDependencies:
+ '@nuxt/ui':
+ specifier: ^0.3.3
+ version: 0.3.3(nuxt@packages+nuxt)(rollup@3.21.0)(vite@3.2.5)(vue@3.2.47)(webpack@5.80.0)
+ nuxt:
+ specifier: workspace:*
+ version: link:../../../packages/nuxt
+
examples/routing/layouts:
devDependencies:
'@nuxt/ui':