Using Axios in Vue to consume a JSON API from a URL

This article provides a quick and easy approach for consuming API data in Vue using Axios.

Adding Axios to your Vue application

Install Axios using NPM:

npm install --save axios

Assign Axios for usage as $http by adding this to the top of your main.js file.

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$http = axios;Code language: JavaScript (javascript)

Consuming an API URL inside a Vue component

Accessing and processing the API data

Inside the <script></script>:

export default {
  data () {
    return {
      title: 'Consuming an API',
      data1: '',
      data2: ''
    }
  },
  mounted () {
    this.$http
      .get('<some_url>')
      .then(response => (this.data1 = response.data))
      .catch(error => console.log(error))
    this.$http
      .get('<some_url>')
      .then(response => (this.data2 = response.data))
      .catch(error => console.log(error))
  }
}Code language: JavaScript (javascript)

Using API data

Inside the <template></template>:

<h1>{{ title }}</h1>
<pre>{{ data1 }}</pre>
<pre>{{ data2 }}</pre>Code language: HTML, XML (xml)