Nuxt 3 async calls to /server/api/ from view in /pages/

nuxt3-async-calls-to-server-api.markdown

Nuxt 3 async calls to /server/api/ from view in /pages/

You can easily add this logic in App.vue too.

nuxt3-async-calls-to-server-api.ts

/**
 * add in "/server/api/" folder as "async.ts"
 * or rename it as you wish
 * ref: https://jsonplaceholder.typicode.com/
**/

export default defineEventHandler(async (): Promise<any> => {
    return await $fetch("https://jsonplaceholder.typicode.com/posts");
});

nuxt3-async-calls-to-server-api.vue

<script setup lang="ts">
    const rspns = $fetch("/api/async");
    rspns.then((data) => console.log("data: ", data));
</setup>

<template>
    <div>Check browser's console for logs</div>
</template>

<style>
/**
 * add in "/pages/" folder as "index.vue"
**/
</style>