nuxt(docs): example in docs

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"}

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"}

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>

examples/other/custom-fetch-composable/nuxt.config.ts → 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'
+  ]
 })