diff --git a/pages/experiments/data-fetching/nuxt/index.vue b/pages/experiments/data-fetching/nuxt/index.vue
index 1a2654a..6f05a51 100644
--- a/pages/experiments/data-fetching/nuxt/index.vue
+++ b/pages/experiments/data-fetching/nuxt/index.vue
@@ -17,6 +17,11 @@
       <WlExperimentCanvas>
         <p><code>$fetch()</code> = <code>{{ data.fetch }}</code></p>
       </WlExperimentCanvas>
+      <h2 class="mt-3 text-lg"><code>useFetch()</code></h2>
+      <p>Fetches data both only on server (unless client-side navigation happens):</p>
+      <WlExperimentCanvas>
+        <p><code>useFetch()</code> = <code>{{ data.useFetch }}</code></p>
+      </WlExperimentCanvas>
     </WlContainer>
   </NuxtLayout>
 </template>
@@ -24,14 +29,19 @@
 <script lang="ts" setup>
 import { reactive } from 'vue'
 
+import { useFetch } from '#app'
 import WlExperimentCanvas from '~/components/shared/experiments/WlExperimentCanvas.vue'
 import WlContainer from '~/components/shared/layout/WlContainer.vue'
 
 const data = reactive({
-  fetch: 0
+  fetch: 0,
+  useFetch: 0
 })
 
 const fetchResponse = await $fetch('/api/data-fetching/nuxt/fetch')
 data.fetch = fetchResponse.value
+
+const useFetchResponse = await useFetch('/api/data-fetching/nuxt/use-fetch')
+data.useFetch = useFetchResponse.data.value!.value
 </script>
 
diff --git a/server/api/data-fetching/nuxt/use-fetch.get.ts b/server/api/data-fetching/nuxt/use-fetch.get.ts
new file mode 100644
index 0000000..949a727
--- /dev/null
+++ b/server/api/data-fetching/nuxt/use-fetch.get.ts
@@ -0,0 +1,9 @@
+import { defineEventHandler } from 'h3'
+
+export default defineEventHandler(async () => {
+  console.log(`[${new Date().toISOString()}] API - useFetch`)
+
+  return {
+    value: 2
+  }
+})