In this rather short post, I am going to walk through on how to consume APIs using Axios for your VueJS application. The first thing we are going to do is to set up Axios and VueJS and in this case I am going to use codepen.

Setting up CodePen

Import VueJS and Axios
Import VueJS and Axios

The first thing that you have to do is import the VueJS library as well as Axios from the settings tab.

For the api that we are going to consume, we are going to use JsonPlaceholder and they will provide dummy api that we can make use of.

Json placeholder homepage
Json placeholder homepage

Initialize VueJS on Codepen

To start, I will initialize the base of the application and apply some styling. You can check the screenshot below.

Initialize vuejs and axios
Initialize vuejs and axios

Once you have written the code, then let’s continue to define the methods to retrieve the api. To do that we can call the axios directly as we have require it on the settings tab. We will call the axios method when the application is on a mount state which mean everyhing have been processed and ready to be mounted.

For the api endpoints, it will looks like this.

JsonPlaceholder resources
JsonPlaceholder resources

in this case, we will request to the posts endpints. To request it we will use the get method that’s provided on axios. To see what the endpoints on your browser, visit this page jsonplaceholder posts json.

vuejs mounted method and axios result
vuejs mounted method and axios result

As you can see here, we have define the mounted method and we call the getPosts method to ensure the mounted method is not bloated. Once we retrieve the posts endpoint then we pass it to the res parameter where we will log the data to the console.

Upon opening the console we will see all of the 100 posts that we have just requested. Now let’s create a new data variable for our vuejs apps to hold the array. What you need to is is to add this posts: []

Once you have done that then we will save the posts to the array by declare it like below.

axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(res => this.posts = res.data);

What we have to do now is loop through it and we will see our page get updated with all of the post that we have just retrieved.

vuejs looping through array
vuejs looping through array

More Http methods

There are more http methods that axios has provide for us to use such as post, put, patch, delete and other. You can read the documentation Axios Docs. Other alternative you can use fetch that’s provided by the browser itself and it looks like the following.

fetch API
fetch API

I also have link the example from the codepen below if you want to check them out.

Conclusion

Writing an app to consume APIs using Axios for your VueJS application is not that difficult. What you have to do is just understand the api that have been provided and you can now build an application that make use of 3rd party API easily.

Thank you for your time and I hope the tutorials help you. Keep exploring and happy coding.