How to Use Vue.js and Axios to Display Data from an API

How to Use Vue.js and Axios to Display Data from an API

Introduction

Vue.js is a front-end JavaScript framework for building user interfaces. It’s designed from the ground up to be incrementally adoptable, and it integrates well with other libraries or existing projects. This makes it a good fit for small projects as well as sophisticated single-page applications when used with other tooling and libraries.

An API, or Application Programming Interface, is a software intermediary that allows two applications to talk to each other. An API often exposes data that other developers can consume in their own apps, without worrying about databases or differences in programming languages. Developers frequently fetch data from an API that returns data in the JSON format, which they integrate into front-end applications. Vue.js is a great fit for consuming these kinds of APIs.

In this tutorial, you’ll create a Vue application that uses the Cryptocompare API to display the current prices of two leading cryptocurrencies: Bitcoin and Etherium. In addition to Vue, you’ll use the Axios library to make API requests and process the obtained results. Axios is a great fit because it automatically transforms JSON data into JavaScript objects, and it supports Promises, which leads to code that’s easier to read and debug. And to make things look nice, we’ll use the Foundation CSS framework.

Note: The Cryptocompare API is licensed for non-commercial use only. See their licensing terms if you wish to use it in a commercial project.

Prerequisites

Before you begin this tutorial you’ll need the following:

Step 1 — Creating a Basic Vue Application

Let’s create a basic Vue application. We’ll build a single HTML page with some mocked-up data that we will eventually replace with live data from the API. We’ll use Vue.js to display this mocked data. For this first step, we’ll keep all of the code in a single file.

Create a new file called index.html using your text editor.

In this file, add the following HTML markup which defines an HTML skeleton and pulls in the Foundation CSS framework and the Vue.js library from content delivery networks (CDNs). By using a CDN, there’s no additional code you need to download to start bulding out your app.

This code creates a new Vue app instance and attaches the instance to the element with the id of app. Vue calls this process mounting an application. We define a new Vue instance and configure it by passing a configuration object. This object contains an el option which specifies the id of the element we want to mount this application on, and a data option which contains the data we want available to the view.

In this example, our data model contains a single key-value pair that holds a mock value for the price of Bitcoin: { BTCinUSD: 3759.91}. This data will be displayed on our HTML page, or our view, in the place where we enclosed the key in double curly braces like this:

<div class="card-divider"> <p>{{ BTCinUSD }}</p>
</div>

We’ll eventually replace this hard-coded value with live data from the API.

Open this file in your browser. You’ll see the following output on your screen, which displays the mock data:

We’re displaying the price in U.S. dollars. To display it in an additional currency, like Euros, we’ll add another key-value pair in our data model and add another column in the markup. First, change the data model:

Now save the file and reload it in your browser. The app now displays the price of Bitcoin both in Euros as well as in US Dollars.

We’ve done all the work in a single file. Let’s split things out to improve maintainability.

Step 2 — Separating JavaScript and HTML for Clarity

To learn how things work, we placed all of the code in a single file. Now let’s separate the application code into two separate files, index.html and vueApp.js. The index.html file will handle the markup part, and the JavaScript file will contain the application logic. This will make our app more maintainable. We’ll keep both files in the same directory.

First, modify the index.html file and remove the JavaScript code, replacing it with a link to the vueApp.js file.

Our data model has become a little more complex with a nested data structure. We now have a key called results which contains two records; one for Bitcoin prices and another for Etherium prices. This new structure wil let us reduce some duplication in our view. It also resembles the data we’ll get from the cryptocompare API.

Save the file. Now let’s modify our markup to process the data in a more programmatic way.

Open the index.html file and locate this section of the file where we display the price of Bitcoin:

This result looks exactly like the hard-coded data model you used in the previous step. All we have to do now is switch out the data by making a request to this URL from our app.

To make the request, we’ll use the mounted() function from Vue in combination with the GET function of the Axios library to fetch the data and store it in the results array in the data model. The mounted function is called once the Vue app is mounted to an element. Once the Vue app is mounted, we’ll make the request to the API and save the results. The web page will be notified of the change and the values will appear on the page.

First, open index.html and load the Axios library by adding a script below the line where you included Vue:

Notice we’ve removed the default value for results and replaced it with an empty array. We won’t have data when our app first loads, but we don’t want things to break. Our HTML view is expecting some data to iterate over when it loads.

The axios.get function uses a Promise. When the API returns data successfully, the code within the then block is executed, and the data gets saved to our results variable.

Save the file and reload the index.html page in the web browser. This time you’ll see the current prices of the cryptocurrencies.

Conclusion

In less than fifty lines, you created an API-consuming application using only three tools: Vue.js, Axios, and the Cryptocompare API. You learned how to display data on a page, iterate over results, and replace static data with results from an API.

Now that you understand the fundamentals, you can add other functionality to your application. Modify this application to display additional currencies, or use the techniques you learned in this tutorial to create another web applications using a different API.