How to use Axios with Vue.js?

Vue.js, on the other hand, is a popular progressive JavaScript framework used for building user interfaces. By utilizing the capabilities of both Axios and Vue.js, we can create web applications that are both modern,dynamic, and use real-world data.

Setting up Axios with Vue.js

To create a new Vue.js project, you can use the following command in your terminal:

sh
Copy
npx @vue/cli create my-app

Simply replace my-app with the name of your application, and Vue CLI will create a new project with all the necessary files and dependencies. This allows you to quickly set up a new Vue.js project and start building your application.

Installing Axios

The first step to using Axios with Vue.js is installing Axios. Axios can be easily installed through a package manager such as npm or Yarn. To install Axios, open your terminal and run the following command:

sh
Copy
npm install axios

Importing Axios in Vue.js

After installing Axios, you can import it into your Vue.js project. To do this, open the file where you want to use Axios and add the following line of code:

js
Copy
import axios from 'axios';

Testing Axios

To ensure that Axios works correctly in your Vue.js project, you can test it by making a simple HTTP request.

js
Copy
axios.get('https://example.com/api')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

Usage

Let's look at how to make a GET request with Axios and retrieve data from the response.

For this example, we'll use Quotes API from Rapid API Hub to retrieve a random quote. So please go ahead and subscribe to the API.

js
Copy
axios.get('https://quotes15.p.rapidapi.com/quotes/random/', {
  headers: {
    'x-rapidapi-host': 'quotes15.p.rapidapi.com',
    'x-rapidapi-key': 'your-api-key'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.log(error);
});

After making a GET request with Axios, we can retrieve data from the response using the response.data property. In the example above, we log the response data to the console with console.log(response.data).

You can create a component QuoteAPI and add the Axios GET request code. Go ahead and paste this code there:

vue
Copy
<template>
  <div>
    <h2>{{ quote }}</h2>
    <p>- {{ author }}</p>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: 'QuoteAPI',
  data() {
    return {
      quote: '',
      author: ''
    }
  },
  created() {
    axios.get('https://quotes15.p.rapidapi.com/quotes/random/', {
      headers: {
        'x-rapidapi-host': 'quotes15.p.rapidapi.com',
        'x-rapidapi-key': 'YOUR_API_KEY_HERE'
      }
    })
    .then(response => {
      this.quote = response.data.content;
      this.author = response.data.originator.name;
    })
    .catch(error => {
      console.log(error);
    });
  }
}
</script>

Don’t forget to replace your-api-key with your own api key.

Paste the following code in your App.vue file:

vue
Copy
<template>
  <div id="app">
    <QuoteAPI />
  </div>
</template>
<script>
import QuoteAPI from './components/QuoteAPI.vue';
export default {
  name: 'App',
  components: {
    QuoteAPI
  }
}
</script>

Wrap up

Axios is a powerful library that can be used with Vue.js to make HTTP requests to APIs. With its simplicity and flexibility, Axios provides a great way to handle API calls and manage responses in a Vue.js application.

We’ve also written a guide on how to use the Fetch API with Vue.js, which you can read to get more familiar with Vue.js and how we can handle API calls in different ways.