Consuming a Rest API with Axios in Vue.js

Last Updated : 28 Aug, 2025

Many times when building an application for the web that you may want to consume and display data from an API in VueJS using JavaScript fetch API, Vue resource, jquery ajax API, but a very popular and most recommended approach is to use Axios, a promise-based HTTP client.

Axios is a great HTTP client library. Similar to JavaScript fetch API, it uses Promises by default. It’s also quite easy to use with VueJS.

Creating VueJS Application and Installing Module:

Step 1: Create a Vue application using the following command.
```
vue create vue-app
```
Step 2: Install the Axios module using the following command.
```
npm install axios 
```
Step 3: We can include Vue.js into HTML using the following CDN link:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
Project Directory: It will look like this.

Creating a Vue.js Project with Axios

Under this single heading, you can include:

The HTML structure
The App.js (Axios call)
The CSS styling

HTML Structure :

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js">
    </script>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="app-vue">
        <div class="users">
            <div v-if="errored">
                <p>
                    We're sorry, we're not able to 
                    retrieve this information at the 
                    moment, please try back later
                </p>
            </div>

            <div v-else>
                <h4 v-if="loading">
                    Loading...
                </h4>
                <div v-for="post in posts" 
                    :key="post" class="post">
                    {{post.title}}
                </div>
            </div>
        </div>
    </div>
</body>

</html>

App.js(Vue) Code with Axios :

JavaScript

<script>
        new Vue({
            el: '#app-vue',
            data() {
                return {
                    posts: null,
                    loading: false,
                    errored: false
                }
            },
            created() {

                // Creating loader
                this.loading = true;
                this.posts = null

                axios.get(
        `http://jsonplaceholder.typicode.com/posts%60)
                    .then(response => {

                        // JSON responses are 
                        // automatically parsed
                        this.posts = response.data
                    })

                    // Dealing with errors
                    .catch(error => {
                        console.log(error)
                        this.errored = true
                    })
            }
        });
    </script>

CSS Styling :

style.css

#app-vue {
    display: flex;
    justify-content: center;
    font-family: 'Karla', sans-serif;
    font-size: 20px;
}
   
.post {
    width: 300px;
    border: 1px solid black;
    display: flex;
    flex-direction: row;
    padding: 20px;
    background: #FFEEE4;
    margin: 10px;
}

Steps to Run Application: If you have installed the Vue app, you can run your application using this command.

npm run serve

Output: If you are using it as CDN then copy the path of your HTML and paste it on your browser.

This project shows how easy it is to use Axios in Vue.js for fetching data. You can build on this to create more powerful and user-friendly applications.

lawsonezekiel68

Improve

Article Tags :

Consuming a Rest API with Axios in Vue.js

Creating a Vue.js Project with Axios

HTML Structure :

App.js(Vue) Code with Axios :

CSS Styling :

Explore

JavaScript Basics

JS Variables & Datatypes

JS Operators

JS Statements

JS Loops

JS Perfomance & Debugging

JS Object

JS Function

JS Array

Thank You!

What kind of Experience do you want to share?