Build a Cryptocurrency Tracker with Vue.js

Published in

eliteng

6 min readFeb 15, 2018

As cryptocurrencies continues to grow in popularity, the value of cryptocurrencies can vary greatly over time. If you’re lucky, some coins bought for a handful of dollars a few years ago can be worth thousands of dollars now. As a developer, you may be interested in building cryptocurrency apps. Fortunately, you can have access to the data surrounding the current cryptocurrencies via a free API from CryptoCompare that will provide you with everything you would probably ever need.

In this tutorial, we’ll be looking at building a cryptocurrency tracker that helps us keep track of 5 popular cryptocurrencies price value in USD and EURO. We’ll be using Vue.js as a lot of good things are being said about it on the web, with it apparently being faster than React, with its implementation of Snabbdom, a simple and powerful Virtual DOM focused on performance. On top of that is notably smaller than React sitting around 14kb.

So let’s get started, we’ll be making use of Vuetify which comes with all the tools you need to build incredible user interfaces giving you the power of Vue and Material Design.

Using Vue-cli

First, we need to install Vue-cli. Make sure you have Node.js and npm installed, then you can go ahead to install the Vue CLI globally on your local system using:

$ npm install -g vue-cli

Having installed the Vue-cli successfully the vue command becomes available. Now we're able to initiate a project by using this command in the following way:

$ vue init vuetifyjs/webpack cryptocurrency_tracker

We're telling vue to initiate a new project and use the vuetifyjs/webpack template specifying the name cryptocurrency_tracker. Executing the command brings up a few questions on the command line as you can see in the following screenshot:

Note: I selected the option to use a custom theme

The project was generated in the cryptocurrency_tracker folder, so let’s change directory to install dependencies using npm

$ cd cryptocurrency_tracker
$ npm install

Once we’re done installing all dependencies, let’s start our development server using npm

$ npm run dev

This will start our server on a port 8080 and the application output is displayed in the browser automatically . As you can see in the following screenshot we now have a Vue.js project with Vuetify custom theme.

Files and Folder Structure

If you look into the project directory we have the main.js file which serves as the application’s entry point. Here’s a sample:

import Vue from 'vue'import App from './App'import Vuetify from 'vuetify'import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify, { theme: {primary: '#ee44aa',secondary: '#424242',accent: '#82B1FF',error: '#FF5252',info: '#2196F3',success: '#4CAF50',warning: '#FFC107'}})
Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',components: { App },template: '<App/>'})

As you can see vue uses the vuetify plugin using Vue.use(Vuetify) that comes with the basic theme settings. The vue instance was also created using new Vue() that has a config object, theel attribute simply specifies the selector at which the app is rendered within, the components attribute register a list of components that are available to the vue instance, the template is basically the components elements to be rendered which is currently the App.vue component. If you take a look at what we have in the App.vue file you should see the code for the custom template provided by vuetify. There’s also the HelloWorld component that was rendered between the v-content tag it’s located in src/components/ folder we can go ahead and rename the file to Tracker.vue and also update the file import in App.vue

....
<script>
import Tracker from './components/tracker'export default {
  data () {
    return {
      clipped: false,
      drawer: true,
      fixed: false,
      items: [{
        icon: 'bubble_chart',
        title: 'Inspire'
      }],
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: 'Cryptocurrency Tracker'
    }
  },
  name: 'App',
  components: {
    Tracker
  }
}
</script>
....

Setting up the basic layout

Now let’s move on to setting up the basic layouts for displaying our cryptocurrencies. Here’s a template for a list of data I got from the Vuetify Documentation, we can replace this with the v-layout section in the Tracker.vue file

<v-layout row>
      <v-flex xs12 sm10 offset-sm1>
        <v-card>
          <v-toolbar color="blue" dark>
            <v-toolbar-title>Tracker</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-text> USD | EURO </v-text>
          </v-toolbar>
          <v-list>
            <v-list-tile avatar @click="">
              <v-list-tile-avatar>
                <img src="'currency_img'">
              </v-list-tile-avatar>
              <v-list-tile-content>
                <v-list-tile-title v-text="'Currency Name'">
                </v-list-tile-title>
              </v-list-tile-content>
              <v-list-tile-action>
                <span>Currency Price</span>
              </v-list-tile-action>
            </v-list-tile>
          </v-list>
        </v-card>
      </v-flex>
    </v-layout>

Here’s the output:

Connecting to the Cryptocurrency API

Now that we’ve the basic layout ready, let’s move on to fetching data from the Cryptocurrency API. To do this, we’ll need to install an HTTP client library called Axios using npm:

$ npm install axios --save

After a successful installation, we can now make use of it in the App.vue file

...
...
...
<script>
import axios from 'axios';
...
...</script>...

Next, under export default, we have the data attribute that returns an object which is use to store data more like application’s state. There are some already existing data that came with the Vuetify plugin, all we need to do now is to add a new attribute cryptocurrencies this will store the data from the API response and also an errors attribute to store any error from the API

export default {
    data () {
        return {
            cryptocurrencies: [],
            errors: [],
            ...
            ...
        }    },
...
...
}

It’s time to make the API call, we need to call the created () hook, which gets invoked when Vue has set up events and data observation. This is where we’ll make our request to the API. Read more on Vue Lifecycle Method

export default {
    data () {
        return {
            cryptocurrencies: [],
            errors: [],
            ...
            ...
        }    },
    created () {
        axios.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT,LTC,XMR&tsyms=USD,EUR')
        .then(response => {
            this.cryptocurrencies = response.data;
         }).catch(error => this.errors.push(error));
    }
...
...
}

We now have our cryptocurrencies data, let’s go ahead and display the data on the layout we had initially. First we need to pass the cryptocurrencies array as a prop to the Tracker component like this

...
<Tracker v-bind:cryptocurrencies="cryptocurrencies" />
...

Our cryptocurrency data is now available in the Tracker component, let’s now receive the props that have been passed. So in the Tracker.vue file let’s add a script tag with the following:

<script>
  export default {
    props: ['cryptocurrencies'],
    data () {
      return {
        images: {
          BTC: 'https://www.cryptocompare.com/media/19633/btc.png',
          IOT: 'https://www.cryptocompare.com/media/1383540/iota_logo.png',
          ETH: 'https://www.cryptocompare.com/media/20646/eth_logo.png',
          XMR: 'https://www.cryptocompare.com/media/19969/xmr.png',
          LTC: 'https://www.cryptocompare.com/media/19782/litecoin-logo.png'
        }
      }
    }
  }
</script>

As you can see, we have an image attribute that contains the image urls for each cryptocurrency. So we need to modify our layout to display the cryptocurrency data, We will simply use the Vue v-for directive to iterate through our array of objects just like this:

<v-layout row>
      <v-flex xs12 sm10 offset-sm1>
        <v-card>
          <v-toolbar flat color="blue" dark>
            <v-toolbar-title>Tracker</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-text> USD | EURO </v-text>
          </v-toolbar>
          <v-list>
            <v-list-tile style="width: 100%" avatar v-for="(price, currency) in cryptocurrencies" :key="currency" @click="">
              <v-list-tile-avatar>
                <img :src="images[price]">
              </v-list-tile-avatar>
              <v-list-tile-content>
                <v-list-tile-title v-text="currency"></v-list-tile-title>
              </v-list-tile-content>
              <v-list-tile-action>
                <span>${{price.USD}} | €{{price.EUR}}</span>
              </v-list-tile-action>
            </v-list-tile>
          </v-list>
        </v-card>
      </v-flex>
    </v-layout>