Consuming a Rest API with Axios in Vue.js

30 Jun, 2021
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 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 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/vue@2.5.17/dist/vue.js”></script>Project Directory: It will look like this.
Step 3: We can include Vue.js into HTML using the following CDN link:
<script src=”https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js”></script>
Project Directory: It will look like this.
Project structure
index.html
<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/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>      <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`)                    .then(response => {                          // JSON responses are                         // automatically parsed                        this.posts = response.data                    })                      // Dealing with errors                    .catch(error => {                        console.log(error)                        this.errored = true                    })            }        });    </script></body>  </html>
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.
Output of our application
Conclusion: There are many ways to work with Vue and axios beyond consuming and displaying an API. You can also communicate with Serverless Functions, post/edit/delete from an API where you have to write access, and many other benefits.
HTML-Questions
Picked
Vue.JS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Angular File Upload
Form validation using jQuery
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request