Vue Component Api

Posted on  by admin

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.

Lesson Project

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.

Replacing lifecycle hooks

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.

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.

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.

Replacing the data option with ref()

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.

Two-way databinding with v-model

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

tag.

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.

In the Vue.js Component that you have defined, the responseAvailable flag is set whenever the API response is received. Hence, you can use this flag to decide on rendering the result string containing the joke. Open the ‘index.html’ file and add the following HTML snippet below the

Ivaylo Gerchev

I am a web developer/designer from Bulgaria. My favorite web technologies include SVG, HTML, CSS, Tailwind, JavaScript, Node, Vue, Nuxt, PHP, Laravel, and Statamic. When I'm not programming the Web, I love to program my own reality ;)

Custom events and context