How can I display cryptocurrency data using Vue 3?

How can I display cryptocurrency data using Vue 3?

You can use Vue 3 along with an API like CoinGecko to fetch and display cryptocurrency data. Would you like a code example?

Yes, please provide a code example.

Here's a simple example:

<template>
  <div>
    <h1>Cryptocurrency Prices</h1>
    <ul>
      <li v-for="coin in coins" :key="coin.id">
        {{ coin.name }}: {{ coin.current_price }} USD
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const coins = ref([]);

    onMounted(async () => {
      const response = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd');
      coins.value = await response.json();
    });

    return { coins };
  }
};

This will display a list of cryptocurrencies and their current prices.

What if I want to display historical data as well?

You can use the CoinGecko API's historical data endpoint. Would you like to see how to implement that?