Vue Api Call

Posted on  by admin

Wrap Up

These days there are so many incredible web technologies in the market that you can use to build your applications. If you are a JavaScript developer, you can go with React.js, Vue.js, Next.js, Angular.js, Swelte, etc. With Python, you can go with Django, Flask, CherryPy, Bottle, etc. You would have to make API calls to your server or some public REST API in each of these technologies.

Learning to make these calls is essential. In this piece, we will look at how to consume APIs in Vue.js. We will also briefly look at Vue.js as a web framework. So without any further ado, let’s jump in! It is a modern JavaScript framework launched in 2014 to build web interfaces and single-page applications.

FAQ

It was created by Evan You to combine the pros of Angular into a lightweight and fast framework. Vue.js is built on top of HTML, CSS, and JavaScript and provides a declarative and component-based programming model.

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.

Edited

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.

Vue.js

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:

  1. For this, you can use the official Vue.js CLI to scaffold a project.
  2. For this, run the following command inside the terminal:.
  3. It will create a Vue.js project in your current working directory with project name test-project.
  4. 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.

Conclusion

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.

Since we are using JavaScript, let’s choose the (JavaScript) fetch from the dropdown.

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.

Vue.js is one of the Javascript frameworks gaining immense popularity over the last few years. 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

element in the HTML.

The ‘data’ contains three data variables that you will use later for displaying text returned from the API in the HTML.

Further Considerations

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

element, this Vue.js component is attached to the
element.

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.

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. If you take a look at the code snippets provided by the API console, you can see the sample code for invoking an AJAX call on this API using the Javascript fetch( ) function.

Vue.js does not provide its internal API for AJAX calls. It doesn’t need to since it’s a component framework for building web applications. It can still rely on the standard W3C JavaScript APIs or third-party libraries to provide supporting features.

You can use the JavaScript fetch( ) call within the Vue.js component to make the API call. 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.

  1. Another thing to note is the use of responseAvailable variable. This is used as a flag to indicate the availability of the API response.
  1. 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.
  1. 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

tag.

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.

Consuming APIs in Vue.js