Table of Contents. Vue.js Components. How To Make an API Call with Vue.js (Fetch Data from API using Vue.js). The web is progressing fast with new technologies and libraries emerging every few months.
Initially launched in 2014, it derives inspiration from Angular but is very lightweight and ideal for building single-page web applications.
In this blog post, we are going to take a dig at integrating public APIs with a simple Vue.js application to fetch and display data on UI. In case you are wondering, here is an article on the concept of APIs that also covers the various types and categories of APIs supported by us at RapidAPI.
According to the official documentation, Vue is a progressive framework for building user interfaces.
It supports augmented rendering of the HTML markup through a template declaration bound to a data model.
- When the data model is updated, the browser’s HTML DOM also changes accordingly.
- Vuejs is a frontend-end framework, and hence it is implemented only in the view layer.
- Evan You, a former Google and Meteor employee, created Vue.js.
- He wanted to extract the good parts of Angular, such as data binding and the>A separate file ‘scripts.js’ defines the Vue.js component.
- Create a new file named ‘scripts.js’ in the root directory and add the following code.
- This is a barebones Vue.JS component definition with an Options object containing the ‘el’, ‘data’ , and ‘methods’ properties.
The ‘el’ property points to the “#main” selector which is the id of the top-level
The ‘data’ contains three data variables that you will use later for displaying text returned from the API in the HTML. The ‘methods’ property defines a single function fetchAPIData( ). This is currently left blank but will be defined in the subsequent steps. With the ‘el’ bound to the CSS selector of the top-level
Create a new file named ‘styles.css’ in the root directory. Leave the file empty for now. We will come back to it later.
You will now edit the ‘script.js’ file to add the API call to the Vue.js component.
Before that, you must decide on the API. The choice of API is dependent on the application that you are building, or the API functionality that you are relying upon to be fulfilled by the API.
For this Vue.js example, we have chosen the Jokes Database API.
It returns a joke every time you call it and is very simple to use.
The idea here is to have a simple web page that can display a joke every time the user clicks on a button.
You can access the API console and subscribe to the API by opting for the Basic subscription that gives you 100 calls to this API per month.
However, this API enforces a rate limit of one call per hour. If you want to have some fun with jokes while building this Vue.js app, then you can subscribe to the unlimited Mega plan for only $USD 1.50 per month.
The Jokes Database API supports a single endpoint.
Upon triggering this API, it retrieves a random joke from the Jokes Database and returns that in the API response.
- Open the ‘scripts.js’ file and add the following code inside the fetchAPIData( ) method.
- The fetch( ) call returns a Promise.
- In case of a success response, you retrieve the API response as a JSON object by calling the json( ) on the responseobject, which returns yet another Promise.
- This Promise resolves to the response object which retrieves the joke from the body property of the API response object and assigns it to the result data variable of the Vue.js component.
Another thing to note is the use of responseAvailable variable. This is used as a flag to indicate the availability of the API response.
It is reset to false at the beginning. It is also used to control the display of the joke on the UI, as you will see in the next step.
Now that the API integration is done, you need a way to trigger this API.