Vue.js | Making API calls using Axios

Photo by Fabian Grohs on Unsplash

Basic example to make network requests in VueJS using Axios.

In this post we will use free API Random User Generator to demonstrate network request in VueJS using Axios.

First lets create a html file and put following code :

As we can see its just plain html code with static image,name & email, now we will use Vue to set those info.

To do that, first lets include VueJS & Axios. Put following script at end of body.

Now instead of writing raw values in html, lets create an data variable(with default values for now) and set created data to VueJS instance.

Now lets update our html (inside body)

Changes here:

  • div has id app which is used as el above while creating Vue instance.
  • v-bind is used to set src for image
  • Double curly braces is used to display variable data for name & email.

Now here comes the main part, we will make an api call & update content of data. (which will automatically update our UI due to reactivity.)

Put following code inside Vue instance (below data)

What above code does is, call api using axios once Vue instance is mounted. (More on Instance Lifecycle Hooks)

We are done !

Now every time you reload the page, you can see new user with placeholder at start.

Get final code here.

Thanks for reading !
Dhiraj Sharma

--

--

Developer Android, Flutter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store