Support Online
MirrorLooking Glass
GenixNodeGenixNode
Client Panel
Skip to main content

Guide to Extracting and Listing API Data with Vue.js and Axios

What Will You Learn in This Guide?​

In this guide, you will pull data from an API using Vue.js and Axios.
You will receive the data in JSON format and list it dynamically in the interface.
Finally you will have a Vue application running in real time.

Technical Summary​

  • Purpose: Get live data from API
  • Solution: HTTP request with Axios
  • Result: Dynamic and up-to-date interface

Prerequisites​

The following is sufficient:

  • Basic knowledge of HTML and JavaScript
  • Familiarity with JSON data structure
  • A code editor (VS Code recommended)

1ï¸âƒ£ Creating a Basic Vue Application​

Create a file named index.html.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <title>Kripto Fiyatları</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
</head>
<body>

<div id="uygulama" class="container">
  <h3 class="text-center">Güncel Kripto Fiyatları</h3>
</div>

<script src="https://unpkg.com/vue@3"></script>
</body>
</html>
  • This file creates the HTML skeleton of the Vue application.

2ï¸âƒ£ Separating JavaScript Code​

  1. Create app.js file in the same directory.

const &#123; createApp &#125; = Vue

createApp({
  data() {
    return {
      mesaj: "Veriler yükleniyor..."
    }
  }
}).mount('#uygulama')
  • The logic of the Vue application is kept in a separate file.

3ï¸âƒ£ Dynamic Listing with v-for​

  1. We make the data structure compatible with the API.

createApp({
  data() {
    return {
      sonuclar: {
        BTC: { USD: 3759.91, EUR: 3166.21, TRY: 110500 },
        ETH: { USD: 281.7, EUR: 236.25, TRY: 8500 }
      }
    }
  }
}).mount('#uygulama')

<div v-for="(deger, coin) in sonuclar" class="columns medium-4">
  <div class="card">
    <div class="card-section">{&#123; coin &#125;}</div>
    <div class="card-divider">$ {{ deger.USD }}</div>
    <div class="card-section">€ {{ deger.EUR }}</div>
    <div class="card-section">₺ {{ deger.TRY }}</div>
  </div>
</div>
  • Data is listed automatically with v-for.

4ï¸âƒ£ Live API Data Pulling with Axios​

  1. Add the Axios library.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="app.js"></script>

const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR,TRY";
const &#123; createApp &#125; = Vue

createApp({
  data() {
    return {
      sonuclar: []
    }
  },
  mounted() {
    axios.get(url)
      .then(cevap => {
        this.sonuclar = cevap.data
      })
      .catch(hata => {
        console.error("API hatası:", hata)
      })
  }
}).mount('#uygulama')
  • When the page loads, it calls the API and prints the data to the screen.

â“ Frequently Asked Questions​

1. Why do we use Axios? Axios automates JSON conversion.

2. What should I do if the data is not visible? Check the browser console.

3. How to add new coin? Add it to the fsyms parameter in the URL.

4. Can the data be continuously updated? Yes, setInterval can be used.

Result​

With this guide, you pulled API data using Vue.js and Axios. You listed the data dynamically. The same structure can be used for different APIs.

You can try the GenixNode infrastructure now to safely publish your Vue projects.

yaml