How to Make HTTP GET Request using Axios in Vue 3

In this guide, I will help you learn how to make HTTP Get request using Axios, fetch the data from server, display data list in Vue component.

Making API Calls is a common task for any developer, there are many ways to handle HTTP requests. In this tutorial we are going to learn how to use Axios library to consume API.

Axios is a notable JavaScript package that is used to send HTTP requests from a web browser. It offers provides robust interface for handling asynchronous HTTP requests allow you invoke HTTP requests throw Its dynamic mechanism.

Axios is ideally used in front-end web applications to communicate with APIs (Application Programming Interfaces) and render data from servers.

Here are the additional tutorials that we have created on:

How manage POST request in Vue

How to send PUT request in Vue

How to send DELETE request in Vue

Vue 3 Send HTTP Get Request using Axios Tutorial

Here’s is the process how you can easily invoke HTTP GET request using Axios in a Vue component:

• Step 1: Set Up Vue Application
• Step 2: Install Axios Package
• Step 3: Register Bootstrap UI
• Step 4: Create New Component
• Step 5: Make Axios HTTP Get Call
• Step 6: Update App File
• Step 7: Run App on Browser

Set Up Vue Application

Let us set up the Vue CLI on your system, you have to open the terminal.

Next, type and then run the given command:

npm install -g @vue/cli

We are now ready to install the new Vue application.

vue create vue-demo-app

Make sure to choose the Vue 3 option from the options list.

Go to project directory:

cd vue-demo-app

Install Axios Package

Now, we can use the below command, and install the Axios package in Vue.

 npm install axios

Register Bootstrap UI

This step is not mandatory, if you want to rapidly create UI layout then register the given URL under the head section of your public/index.html file:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

Create New Component

We have to create a new component, in this file we will write the code to fetch the data hence create and add given code in components/Home.vue file:

<template>
    <div>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    }
}
</script>

Make Axios HTTP Get Call

Here is the example code that will guide on how to use Axios to make a GET request in a web browser through Vue component.

Add the following code in the components/Home.vue file:

<template>
    <div>
        <h2>Vue 3 Axios HTTP GET Request Example</h2>
        <div v-if="isLoading">Loading...</div>
        <div v-else>
            <ul>
                <li v-for="user in users" :key="user.id">{{ user.name }}</li>
            </ul>
        </div>
    </div>
</template>
  
<script>
import axios from 'axios';
export default {
    data() {
        return {
            items: [],
            isLoading: true,
        };
    },
    mounted() {
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(res => {
                this.users = res.data;
                this.isLoading = false;
            })
            .catch(error => {
                console.error('Error:', error);
                this.isLoading = false;
            });
    },
};
</script>

Update App File

We need to import the Home component in the App.vue file, it will serve the component that you previously created.

<template>
  <div class="container mt-5">
    <Home />
  </div>
</template>
<script>
import Home from './components/Home.vue';
export default {
  components: {
    Home
  }
}
</script>

Run App on Browser

Once we execute the given code, development server will run and compile your Vue code.

npm run serve

Test your Vue application using the given URL:

http://localhost:8080

Conclusion

Axios sorts out the process of dealing with HTTP requests by offering a dynamic and consistent API interface.

Not just that it also has super clean built-in mechanism for handling ideal scenarios in web application development, for instance sending and receiving JSON data.

In this Vue Axios example we have thoroughly learned how to use Axios in Vue, on top of that how to fetch data from web server by making HTTP Get call in Vue.

Reference: https://www.npmjs.com/package/axios