Error: GET 404 Page not found with Nuxtjs3 - vuejs3

Question

I am learning nuxtjs3. I am trying to get data in the template with fetch. I am following a certain tutorial but unfortunately I am stuck. I am using mysql2 library in the app and a mysql local database. But I am receiving Error: GET http://localhost:3000/api/users/index 404 (Page not found: /api/users/index) in the console. What am I doing wrong.
Below is the database.ts file
import mysql from 'mysql2/promise'
const db = await mysql.createConnection({
host: 'localhost',
user: 'myuser',
password: 'mypass',
database: "mydb"
})
export default db
Below is the index.ts file
import type { IncomingMessage, ServerResponse } from 'http'
import db from '~~/server/middleware/database'
export default async (req: IncomingMessage, res:ServerResponse) => {
const [rows,fields] = await db.execute("SELECT * FROM clients")
return{
staus: res.statusCode,
columns: fields.map((i: any) => i.name),
entries: rows,
message: res.statusMessage
}
}
Below is the index.vue file where I want to display the data.
<script setup>
import { ref, onMounted } from 'vue'
const entries = ref([])
const setEntries = async () => {
const response = await fetch('/api/users/index')
const data = await response.json()
if('entries' in data) {
entries.value = data.entries
}
}
onMounted(setEntries)
</script>
<template>
<table class="table table-bordered table-striped mt-3">
<thead>
<tr>
<th>Client Phone</th>
<th>Client Email</th>
<th style="width: 130px;">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="user in entries" :key="user.client_phone">
<td>{{ user.client_phone }}</td>
<td>{{ user.client_email }}</td>
</tr>
</tbody>
</table>
</div>
</template>
Below is the arrangement of the files and folders of the app.
What am doing wrong to get Error: GET 404 (Page not found: /api/users/index)

Answer 1

Since nobody else has responded and despite not having tried the nuxt fetch API my self, my best guess from reading the Nitro Server Engine docs is that you should be using $fetch not fetch.
fetch is native javascript fetch API thus wont have any attribution to the application and the API endpoint your calling.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
$fetch is a nuxt wrapper for fetch and I assume will be injecting a baseURL and various headers to make it work.
https://nuxt.com/docs/api/utils/dollarfetch#fetch
const response = await $fetch('/api/users/index')
The next problem I can see is according to the server directory docs, the export in server/api/users/index.ts should use defineEventHandler:
import db from '~~/server/middleware/database'
export default defineEventHandler(async (event) => {
const [rows,fields] = await db.execute("SELECT * FROM clients")
return {
staus: res.statusCode,
columns: fields.map((i: any) => i.name),
entries: rows,
message: res.statusMessage
}
})