Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

Vue.js CryptoCurrency Tutorial - Display Exchange Data with an API

By Gary simon - Sep 25, 2017

As cryptocurrencies continue to grow in popularity, as a developer, you may be interested in building cryptocurrency apps. Fortunately, if you ever need access to the data surrounding the current cryptocurrencies, there exists a free API from CryptoCompare that will provide you with everything you would probably ever need.

I'm going to show you how to get all set up and running within 2 of the other most popular javascript frameworks:

This way, just about all of the bases will be covered when it comes to getting up and running for your cryptocurrency project. 

Let's get started!

If you prefer watching a video instead..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more awesome videos.

Prerequisites

Because we're using modern javascript frameworks, we'll need Node.js with NPM installed. You can check whether or not any of these are installed by opening up your command line or console and running:

> node -v
> npm -v

If it provides you with a version number, you're set. If they don't, you will need to visit Nodejs.org and install the appropriate package based on your OS.

After installing, reload your console and rerun the same commands. This time they should give you a version number.

Starting the Vue.js Project

We're going to use the Vue CLI (Command Line Interface) to get us set up with a basic Vue project. 

Open up your command line and run the following:

> npm install vue-cli --global

Next, let's use the CLI to start the new project:

> vue init webpack vue-crypto

This starts a new project named vue-crypto and it uses the webpack template, which is a build tool for handling assets.

Next, we'll hop into the new project folder and run the npm install command to install the dependencies in the package.json file that was generated from the cli:

> cd vue-crypto
> npm install

After it's finished installing the node packages, run the following command to run the development server:

> npm run dev

This will launch the default starter template at http://localhost:8080 and your browser should automatically launch with that address.

Connecting to the Cryptocurrency API

We need to install an HTTP client library called Axios. This will allow us to connect to the cryptocompare API. In the console run:

> npm install axios --save

Within the project folder, navigate to the /src/components/Hello.vue file. This is where we'll place our code.

First, within the <script> section, we must import axios:

<script>
import axios from 'axios'

// Other stuff commented out

Next, under export default, we have to make some changes. The data attribute needs to contain a property that will hold our crypto data and any errors:

<script>
import axios from 'axios'

export default {
  name: 'hello',
  data: () => ({
    cryptos: [],
    errors: []
  }),

Then, we need to call the created () function, which fires when this component is loaded. This is where we will add our axios get call to the API.

<script>
import axios from 'axios'

export default {
  name: 'hello',
  data: () => ({
    cryptos: [],
    errors: []
  }),

  created () {
    axios.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT&tsyms=USD')
      .then(response => {
        this.cryptos = response.data
        console.log(response)         // This will give you access to the full object
      })
      .catch(e => {
        this.errors.push(e)
      })
  }
}
</script>

The first line calls axios.get which accepts the API endpoint as the first argument. 

This is the point at which it makes sense to visit the CryptoCompare.com API Documentation to discover all of the potential request endpoints you can designate. It includes everything from a massive coin list, price, history, mining, etc..

For this tutorial, we're going to just simply display the current USD value associated with 3 specified currencies:

  • Bitcoin (BTC)
  • Ethereum (ETH)
  • IOTA (IOT)

You can modify the URL parameter above to include others if you wish.

We then use a then method to set the value of this.cryptos to the response.data.

If you view the console in your browser, you will see the returned object with a number of properties. We only need to return the .data property, which is why we set this.cryptos to the response.data.

Defining the Vue Template

We're going to make this very, very simple. We will simply use the Vue v-for directive to iterate through our array of objects. This is what our template should look like at the top of Hello.vue:

<template>
  <div class="hello">
    <div id="crypto-container" v-for="(value, key) in cryptos">
      <span class="left">{{ key }}</span>
      <span class="right">${{ value.USD }}</span>
    </div>
  </div>
</template>

Next, let's define some quick CSS in the style section:

<style>
  body {
    background: #f1f1f1;
  }

  div#crypto-container {
    background:white;
    width: 70%;
    margin: 0 auto 4px auto;
    padding: 1em;
    box-shadow: 1px 1px 0 lightgrey;
  }

  span.left {
    font-weight: bold;
  }

  span.right {
    float:right;
  }
</style>

The Result

I've added a few more currencies just to fill it out a bit more. 

I suggest experimenting with the CryptoCompare API Endpoints to discover the other information you can gather. 

Try changing the axios.get url to:

axios.get('https://www.cryptocompare.com/api/data/coinlist/')

View the console for the full object, which contains a massive list of coins along with their full names, logos, etc..

Hopefully you enjoyed this tutorial!


Share this post




Say something about this awesome post!