I've been following a tutorial on building api routes and the process is as follows:
1. Start by creating a new file called server/api/route.js:
export default defineEventHandler((event) => {
return {
message: `hello api route`
}
})
2. Next, use the api route in a component like this:
<script setup>
const { data: message } = await useFetch('/api/route')
</script>
<template>
<div>
<p>data from api {{ message }}</p>
</div>
</template>
The above steps work perfectly fine, but when attempting to add a query parameter in step 1.:
export default defineEventHandler((event) => {
const { name } = useQuery(event)
return {
message: `hello api name parameter ${name}`
}
})
and then using it in the component in step 2.:
<script setup>
const { data: message } = await useFetch('/api/route?name=mario')
</script>
<template>
<div>
<p>data from api {{ message }}</p>
</div>
</template>
the message property turns out empty. It appears that useQuery(event) is generating an empty variable. Any insights on why this might not be working?