Vue + Axios Tutorial: Build a Real-Time Cryptocurrency Dashboard

Introduction

Axios is a promise-based HTTP client library that works in both Node.js and browsers. This tutorial will teach you how to use the Axios library to make API requests and fetch remote data. You'll learn how to:

Set up a Vue application with Axios
Make API calls to cryptocurrency price APIs
Display real-time crypto price data
Build a fully functional cryptocurrency price dashboard

By the end, you'll have created a beautiful, real-time cryptocurrency price dashboard using Vue.js for the frontend and Axios for API communication. We'll use Foundation CSS framework for styling.

Installing Axios

There are several ways to add Axios to your project:

npm:
```
npm install axios
```
Yarn:
```
yarn add axios
```

CDN:
Add one of these to your HTML file:

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

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Step 1: Create a Basic Vue App

Let's start by creating a simple Vue application to display cryptocurrency prices. We'll use mock data first, then replace it with real API data later.

<!DOCTYPE html>
<html>
<head>
  <title>Crypto Dashboard</title>
  <!-- Load Foundation CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
  <!-- Load Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>Crypto Dashboard</h1>
    
    <div class="card">
      <div class="card-section">
        <h3>Bitcoin (BTC)</h3>
        <p>¥ {{ BTCinCNY }}</p>
        <p>$ {{ BTCinUSD }}</p>
      </div>
    </div>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        BTCinCNY: 73759.99,
        BTCinUSD: 3759.91
      }
    });
  </script>
</body>
</html>

Step 2: Separate JavaScript and HTML

For better organization, let's separate our Vue logic from the HTML:

Create a vueApp.js file:

const vm = new Vue({
  el: '#app',
  data: {
 BTCinCNY: 73759.99,
 BTCinUSD: 3759.91
  }
});

Modify index.html to reference the external JS file:
```
<script src="vueApp.js"></script>
```

Step 3: Enhance Data Structure

Let's improve our data structure to support multiple cryptocurrencies:

const vm = new Vue({
  el: '#app',
  data: {
    results: {
      "BTC": {
        "CNY": 73759.99,
        "USD": 3166.21
      },
      "ETH": {
        "CNY": 33581.77,
        "USD": 2336.25
      }
    }
  }
});

Update your HTML to dynamically display all currencies:

<div id="app">
  <h1>Crypto Dashboard</h1>
  
  <div class="card" v-for="(result, index) in results">
    <div class="card-section">
      <h3>{{ index }}</h3>
      <p>¥ {{ result.CNY }}</p>
      <p>$ {{ result.USD }}</p>
    </div>
  </div>
</div>

Step 4: Fetch Real API Data with Axios

Now let's replace our mock data with real cryptocurrency prices from the CryptoCompare API:

First, add Axios to your HTML:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Update vueApp.js to fetch real data:

const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LINK&tsyms=CNY,USD";

const vm = new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted() {
    axios.get(url).then(response => {
      this.results = response.data;
    });
  }
});

Common Axios Patterns

GET Requests

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

POST Requests

axios.post('https://api.example.com/data', {
    title: 'New Post',
    content: 'Content here'
  })
  .then(response => {
    console.log(response);
  });

Error Handling

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // Server responded with error status
      console.log(error.response.data);
      console.log(error.response.status);
    } else if (error.request) {
      // No response received
      console.log(error.request);
    } else {
      // Other errors
      console.log('Error', error.message);
    }
  });

FAQ

How do I handle API keys with Axios?

You can pass API keys in headers:

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY'
  }
});

What's the difference between Axios and fetch?

Axios has some advantages over the native fetch API:

Automatic JSON data transformation
Better error handling
Request/response interception
Built-in support for request cancellation

How can I add loading states?

Add a loading property in your data:

data() {
  return {
    results: {},
    loading: false,
    error: null
  }
},
methods: {
  fetchData() {
    this.loading = true;
    axios.get(url)
      .then(response => {
        this.results = response.data;
      })
      .catch(error => {
        this.error = error;
      })
      .finally(() => {
        this.loading = false;
      });
  }
}

👉 Build your own dashboard with our advanced tools

👉 Explore more crypto APIs

Conclusion

Congratulations on building your cryptocurrency dashboard! You've learned how to:

Set up Vue with Axios
Make API requests
Handle responses
Display dynamic data

For more complex applications, consider using KalaCloud to quickly build internal tools without extensive frontend work.