Make API call based on route parameter in Nuxt 3 dynamic compopnent - vue.js

Question

I'm attempting to create a simple Nuxt 3 app for learning purposes that uses dynamic routes to load data from an API when the page is loaded. What I'm trying to figure out is how to use the route id param with the composition API to call an external API and make the data available in the component.
So here is my basic folder structure:
/pages
\
index.vue
/currency
\
[id].vue
index.vue:
<template>
<main>
<h1>Index Page</h1>
<table border="1 px solid">
<thead>
<tr>
<th>Name</th>
<th>Symbol</th>
<th>Price</th>
<th>Details</th>
</tr>
<tr v-for="currency in data.data" :key="data.id">
<td>{{ currency.name }}</td>
<td>{{ currency.symbol }}</td>
<td>{{ currency.price_usd }}</td>
<td>
<NuxtLink :to="'/currency/' + currency.id">{{ currency.id }}</NuxtLink>
</td>
</tr>
</thead>
</table>
</main>
</template>
<script>
export default {
async setup() {
const {data} = await useFetch('/api/coinlore/tickers');
return {
data
};
}
}
</script>
and here is what I have for [id].vue
<template>
<main>
<h1>{{ data.data.name }} Detail page</h1>
{{ $route.params.id }}
</main>
</template>
<script>
export default {
async setup() {
const {data} = await useFetch('/api/coinlore/ticker?id=90');
console.log(data);
return {
data
};
}
}
</script>
Going from this blog post I tried this
<template>
<main>
<h1>{{ data.name }} Detail page</h1>
{{ $route.params.id }}
</main>
</template>
<script>
export default {
async setup() {
const coin = reactive({});
function fetchCoin(id) {
const {data} = await useFetch('/api/coinlore/ticker?id=' + $route.params.id);
coin = data;
}
watch('$route.params.id', fetchCoin)
return {
coin
};
}
}
</script>
but no dice there, either.
How can I simply 1) make my API call and 2) populate the data by using the id param in my [id].vue component?

Answer 1

Use the useRoute() hook:
import { useRoute } from 'vue-router';
export default {
setup() { 👇
const route = useRoute();
const { data: coin } = await useFetch('/api/coinlore/ticker?id=' + route.params.id);
return { coin }
}
}
demo

Answer 2

maybe it will help :_)
In index.vue it's better to use programatic routing:
<NuxtLink :to="{path: '/currency', params : {id: currency.id} }">{{ currency.id }}</NuxtLink>
// it will build link: `/currency/[id]`
and as posted by Tony19 there's a need to define route (useRoute hook) in the component:
// import in script
import { useRoute } from 'vue-router';
// define route from 'vue'
const route = useRoute()
// read ID from route params
const currencyId = route.params.id
// actually it's better use literal string for using dynamic data => better reading
const { data: coin } = await useFetch(`/api/coinlore/ticker?id=${currencyId}`);