How to make HTTP requests using axios in Vue.js?

In this article, we will look at how to make an HTTP request in Vue using axios library.

We will begin by creating a new application using Vue CLI.

❯ vue create axios-demo

Once, the installation is complete, we can navigate to the folder and run the server to load the application.

❯ cd axios-demo
❯ npm run serve

This will run our server on port 8080 by default http://localhost:8080/

Now, that we have the project structure ready, let’s start making HTTP requests from Vue. For the demonstration purpose, we will be making use of the Meme generator API called Imgflip API

Axios

Axios is a promise-based HTTP client library that allows you to make requests from the browser and it can also be used with Node.js. In this section, we will see how to use axios with Vue application.

I will be installing axios library using the npm. We will navigate to our project folder and run the following command.

npm install axios

We want to get the first 10 memes from the ImgFlip API and display it in the Vue application. To get them we have to hit a GET request to the below URL.

axios.get("https://api.imgflip.com/get_memes")

To trigger this request, we will create a button that will call a method on click.

<button @click="getMemes">Get Memes</button>

We will first need to import the axios library before using it.

import axios from "axios";

The getMemes method can then call the external API to fetch the data.

getMemes() {
  axios
    .get("https://api.imgflip.com/get_memes")
    .then(
      (response) => (this.memes = response.data.data.memes.slice(0, 10))
    );
}

We will also have a data property memes that will be an empty array initially.

data() {
  return {
    memes: [],
  };
}

Let’s make changes to the App.vue file to see the above code in action.

// App.vue

<template>
  <button @click="getMemes">Get Memes</button>
  <div v-if="memes.length">
    <div v-for="meme in memes" :key="meme.id">
      <h2>{{ meme.name }}</h2>
      <img :src="meme.url" width="100" />
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      memes: [],
    };
  },
  methods: {
    getMemes() {
      axios
        .get("https://api.imgflip.com/get_memes")
        .then(
          (response) => (this.memes = response.data.data.memes.slice(0, 10))
        );
    },
  },
};
</script>

The content is only displayed if memes is not empty.

<div v-if="memes.length">

The API by default provides 100 memes with the following structure.

{
   "success": true,
   "data": {
      "memes": [
         {
            "id": "61579",
            "name": "One Does Not Simply",
            "url": "https://i.imgflip.com/1bij.jpg",
            "width": 568,
            "height": 335,
            "box_count": 2
         },
         {
            "id": "101470",
            "name": "Ancient Aliens",
            "url": "https://i.imgflip.com/26am.jpg",
            "width": 500,
            "height": 437,
            "box_count": 2
         }
         // more data..
      ]
   }
}

Using v-for we are looping through the content and displaying the name and the image of the meme.


<div v-for="meme in memes" :key="meme.id">
  <h2>{{ meme.name }}</h2>
  <img :src="meme.url" width="100" />
</div>

In this case, we are only extracting the first 10 objects to display them on the page.

this.memes = json.data.memes.slice(0, 10);

Output:

axios-vue-1

axios-vue-2

This a basic example to show how to make an HTTP GET request using axios. You can also make POST, PATCH, DELETE, and PUT requests, in the same manner, using axios library in Vue.

Axios#

Axios