Make API call based on route parameter in Nuxt 3 dynamic compopnent-CodePudding

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?

CodePudding user response：

Use the useRoute() hook:

import { useRoute } from 'vue-router';

export default {
  setup() {