Introduce the useFetch() sample code (with API endpoint)

pages/experiments/data-fetching/nuxt/index.vue

@@ -17,21 +17,31 @@
       <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>
 
 <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>
 

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
+  }
+})