Using Vue and Axios to Display Data from an API featured image

Using Vue and Axios to Display Data from an API

Vue.js is a popular JavaScript framework for building user interfaces. It’s designed to be incrementally adoptable. It can also work with other libraries and existing projects. However, Vue can power sophisticated single-page applications by itself (with the help of modern tooling and supporting libraries, of course). Vue, being a JavaScript-based framework, supports all the JavaScript features as well. JSON is a popular JavaScript data format used for data management. Many APIs also expose data in JSON format.

In this guide, we will demonstrate building a single-page web app using Vue. It will report the latest exchange values for some of the most popular cryptocurrencies: Bitcoin and Ethereum. The exchange rates will be pulled from CryptoCompare API. To make the API request and handle the return data, we will also incorporate Axios into our code.

Prerequisites

The following conditions need to be fulfilled before diving into the guide.

Step 1: Create the Application Framework

For easier management of the project files, we will create a dedicated directory. We called it cloudsigma-vue-demo:

Create directory Using Vue and Axios

First, create a new file index.html:

Create file

Then, open the file in a text editor and enter the following code:

Index file 1 Using Vue and Axios

Integrate Foundation and Vue.js. Note that the positionings of the codes are important:

Index file 2 Using Vue and Axios

Here:

  • The link to the Foundation CSS code goes to the header. Check out Foundation on cdnjs.
  • The link to the Vue JavaScript code goes within the <body> . For ease of use, we’ve put it at the bottom. Check out Vue on cdnjs.

We’ll use a separate JavaScript file vueApp.js to manage our Vue app code. Add the file to our HTML file:

Index file 3

Step 2: Create a Basic Vue App

For demonstration, we’re going to create a simple app that prints the latest exchange value of two of the most popular cryptocurrencies Bitcoin and Ethereum into USD and EUR. Because the price of cryptocurrencies is volatile, we’ll use CryptoCompare API to grab the latest exchange price. Check out CryptoCompare API.

  • Basic Markup

Enter the following code in the <body> of index.html:

Next, save the file and open index.html in the browser:

Web Window

As you can see, we created a simple layout that will print the info of our cryptocurrency exchange rates. For now, we’ll work with a single cryptocurrency Bitcoin (BTC).

Did you notice the element {{ BTCtoUSD }}? In Vue, the double curly braces indicate a Vue object. When run, Vue will render those parts of the markup with data according to the instruction. We’re using {{ BTCtoUSD }} as a placeholder for the data that Vue.js will provide.

  • Implement Vue.js Logic

Now, switch to vueApp.js. Here, we’ll tell Vue what data to deliver to the element {{ BTCtoUSD }}. Create a simple Vue application:

vue1

Here, we’ve set a sample value for BTCtoUSD to 40000. This is mock data. We will implement the API later on for live values.

Open index.html in the browser. Notice any difference?

Web Window2

Vue swapped {{ BTCtoUSD }} to 40000.

Step 3: Iterate over Data with Vue

So far, we’ve implemented a static entry for a single cryptocurrency. What if you want to have multiple cryptocurrencies? Let’s try it out. Add another entry to show the exchange rate of BTC to EUR:

Index Window4

After that, update vueApp.js with the value for {{ BTCtoEUR }}:

Vue Page2

Run the app in the browser:

Web Window3

This is all well and good. But what if you want to add exchange rates for more cryptocurrencies? Adding all of them one by one in index.html sounds impractical. In that case, we can let Vue handle the job. We will instruct Vue to iterate over each item and show it on the webpage.

To do so, we need to update the data of vueApp.js first. Include all the values in a single object cryptoDataValues:

vuepage

Time to update index.html. Here, we will use the  v-for tag to iterate over the dataset we defined:

Run the app on the web browser:

WebWindow4

Using this technique, we now only need to update the dataset of vueApp.js. Let’s try it out. Add a new random entry on the dataset:

vue4

Voila! It’s iterating through all the entries!

Step 4: Get Data from the API

It’s finally time we started working with the API. So far, we’ve been using mock data to establish the framework of our application. Now, we will feed live data to our app, thanks to CryptoCompare API.

To get the live data from the API, we’ll use the following URL:

The API returns a JSON object that we can parse. To see what the API response is, use curl to request to the API:

curl

The output looks almost like the hard-coded mock data we’re using, right? All we have to do now is switch out the data. We’ll use the mounted() function from Vue and GET function from the Axios library to fetch the data and store it in the variable results. Once the Vue app is mounted, the mounted() function is called. After successful mounting, the API call is made and the result is recorded. It will also notify changes to the webpage.

We need the Axios library to make it work. Add the Axios library from cdnjs:

Now, head over to the vueApp.js file and modify it so that it works with the API request and parses the data:

Here, the initial value of results is null because when loading the app for the first time, the browser expects a value. After Axios fetches the API output and updates the value, Vue automatically refreshes the webpage, thanks to its Hot Reload feature.

Verify the changes in the web browser. Note that it may take a couple of seconds to update the webpage with values, so you need to be patient.

Complete Codes

This guide was pretty long, so in this section, we have included the final code for both index.html and vueApp.js.

Here’s the code for index.html:

Here’s the code for vueApp.js:

Final Thoughts

In this guide, we’ve demonstrated creating an API-consuming web app using only three tools:

  • js
  • Axios
  • CryptoCompare API

We also showcased displaying data on a webpage, iterating over results, and replacing static data with dynamic ones (results from the API).

Now that you understand the fundamentals, feel free to modify the code and explore by yourself. You can add additional functions to the application, for example, displaying additional currencies. You can also implement the experience gained from this project to work with a different API.

Happy Computing!