diff --git a/docs/3.api/1.composables/use-fetch.md b/docs/3.api/1.composables/use-fetch.md
index 6a4f03963641..06ba5e8c1b0b 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/custom-fetch-composable/app.vue b/examples/other/custom-fetch-composable/app.vue
deleted file mode 100644
index a495b7573290..000000000000
--- a/examples/other/custom-fetch-composable/app.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <NuxtWelcome />
-  </div>
-</template>
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 @@
+
+<script setup lang="ts">
+
+const { data } = await useCustomFetch<object>('/beers')
+
+</script>
+
+<template>
+  <NuxtExampleLayout example="other/use-custom-fetch-composable">
+    <h1 class="text-xl opacity-50">
+      Nuxt custom fetch
+    </h1>
+
+    <pre class="text-left text-xs">{{ data }}</pre>
+  </NuxtExampleLayout>
+</template>
diff --git a/examples/other/custom-fetch-composable/composables/useCustomFetch.ts b/examples/other/use-custom-fetch-composable/composables/useCustomFetch.ts
similarity index 100%
rename from examples/other/custom-fetch-composable/composables/useCustomFetch.ts
rename to examples/other/use-custom-fetch-composable/composables/useCustomFetch.ts
diff --git a/examples/other/custom-fetch-composable/nuxt.config.ts b/examples/other/use-custom-fetch-composable/nuxt.config.ts
similarity index 74%
rename from examples/other/custom-fetch-composable/nuxt.config.ts
rename to examples/other/use-custom-fetch-composable/nuxt.config.ts
index 5e7d9c6fd733..1ede6806b692 100644
--- a/examples/other/custom-fetch-composable/nuxt.config.ts
+++ b/examples/other/use-custom-fetch-composable/nuxt.config.ts
@@ -1,4 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-
+  modules: [
+    '@nuxt/ui'
+  ]
 })
diff --git a/examples/other/custom-fetch-composable/package.json b/examples/other/use-custom-fetch-composable/package.json
similarity index 100%
rename from examples/other/custom-fetch-composable/package.json
rename to examples/other/use-custom-fetch-composable/package.json
diff --git a/examples/other/custom-fetch-composable/tsconfig.json b/examples/other/use-custom-fetch-composable/tsconfig.json
similarity index 100%
rename from examples/other/custom-fetch-composable/tsconfig.json
rename to examples/other/use-custom-fetch-composable/tsconfig.json