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 () {
      .then(response => (this.data1 =
      .catch(error => console.log(error))
      .then(response => (this.data2 =
      .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)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.