The framework can also be used to build desktop applications using the Electron framework. Let’s look at how you can make API calls in Vue.js. We will do this in a bunch of steps to make it easier to follow along.
Instead of looking up APIs on the Internet, let’s go to RapidAPI Hub and create an account if you haven’t already. Learn more about how to use RapidAPI Hub. Once you have logged in, you will see thousands of APIs. I have already found a freemium Random Facts API that we can use.
To use this API, you need to subscribe to it first. You can do this by clicking on Subscribe to Test button.
Once you click the button, you will be redirected to another page where different available subscription packages will be shown.
- Let’s go with the free one for now.
- After all this, you will be redirected back to the original page. Here you will have a key x-rapidapi-key.
- Save it somewhere. It will be used later in the application. We need to create a Vue.js boilerplate.
Let me explain why:
- For this, you can use the official Vue.js CLI to scaffold a project.
- For this, run the following command inside the terminal:.
- It will create a Vue.js project in your current working directory with project name test-project.
- You can change it to whatever you like.
Once you are done, open this project in your preferred code editor. In this step, we need to run the project.
You can do this by first opening a terminal instance inside your project directory and then running the following command:. It will start a local server at port 8080.
What are Vue.js Components?
Go to src/components directory and open the HelloWorld.vue file. Remove all the HTML under the H1 tag and create a button using the button tag.
Once done, set an onclick event on the button. The onclick event handler will call a function when the user clicks this button. We will make our API call inside this function.
I have also added some styles to the button to make it slightly bigger. Now create a methods object inside the export default object. This object will contain the methods that your application will use. Since we need to create a fetchData method to make an API call, we will create it inside this object.
On the Random Facts API page, you will find code snippets of how you can use this API with different languages.
Copy the code snippet and paste it inside the fetchData function.
→ STEP #5
We would also need to convert the response to JSON and log it in the console. We can do it inside the then(). Replace the value of the x-rapidapi-key in the above code snippet with the API key you saved earlier.
Once you are done, go to this URL. Make sure your server is running. Now click on the Click Me! It will call the fetchData function and make the API call. Open the console by inspecting the page, and you will see the API response has logged inside the console.
This guide was an introduction to consuming APIs in Vue.js. We hope that now you can start using APIs in your awesome Vue.js projects. 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.
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.
What is Vue.js?
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.
→ STEP #2
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.
3. Create the Stylesheet for the Vue Component
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.
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.
Our goal is to display a joke upon pressing a button on the web page.
Since the API is part of the fetchAPIData( ) method, you can update the HTML declaration to define a button and assign the “click” event of the button to fetchAPIData( ) method.
Open the ‘index.html’ file and add the following lines below the
Vue.js API Call Examples
Save the file and open it in a web browser. Upon clicking on the button, the fetchAPIData( ) method is triggered, which will, in turn, invoke the Jokes Database API. You can verify this by checking the Network tab on your browser’s developer console.
Now you know how to trigger the Vue.js component through user interaction. Then comes the last part on updating the Vue.js component’s UI based on the data retrieved from API.
As you saw in the fetchAPIData( ) method, the API response is stored in the result variable under the data object.
You have to display the content of the result variable in the HTML.
Vue.js framework follows the Angular way of declarative control flow syntax to decide on the rendering of HTML.