Using Vue for APIs
Tags: vue, javascript, api, tutorial
Published: 2019-07-25 03:36:29

---
title: Using Vue for APIs
published: true
description: How to fetch and display API data using Vue.js
tags: vue, javascript, api, tutorial
---
{% raw %}
<p>At some level, most apps use data and it's probably coming from an API. In this tutorial, we'll use Vue to fetch the data and display it.</p>

<h1>This example</h1>

<p>Let's say you need to display a list of countries in North America. The list will show the country, the capital and its population.</p>

<p>You found the API with the data called <a rel="noreferrer noopener" aria-label="REST Countries (opens in a new tab)" href="https://restcountries.eu/" target="_blank">REST Countries</a>, it has country size and population -- just what you need.</p>

<h1>Welcome to API, Can I Take Your Order?</h1>

<p>When you think about it, APIs are kind of like drive-through restaurants, you make a request and get a response. However, you need to know a few things such as:</p>

<p><strong>1. Where is the food / data located? </strong></p>

<p>You need to the address of the restaurant like you need to know the URL for the API.</p>

<p><strong>2. What's on the menu? </strong></p>

<p>Do you ask for 'chips' or 'fries'? <br>Yeah, they're the same, but you need to use the right word / parameters to get what you want. </p>

<p><strong>3. What do you get?</strong></p>

<p>When you're handed your food / data in a package, you need to know what's in there. Is ketchup included or vinegar? Likewise, what fields and formats are returned?</p>

<p><strong>4. Can you make special requests? </strong></p>

<p>How do you get extra napkins / request certain fields?</p>

<p><strong>Read the Menu</strong></p>

<p>It's good to have an idea of what's involved with the API before beginning your project. Have a look at the menu / documentation, it'll make the job easier. </p>

<h1>Accessing APIs In Vue</h1>

<p>Vue is a javascript framework, so it doesn't have a specific method to use APIs. Ajax or Fetch are ok. <a rel="noreferrer noopener" aria-label="Axios (opens in a new tab)" href="https://github.com/axios/axios" target="_blank">Axios </a>is often recommended because it's simple to use and works, so we'll use that.</p>

<p>Enough theory, let's get our hands on the keyboard and start coding!</p>

<h2>The Basic Set-Up</h2>

<p>To keep things simple, we'll build the app in a web page.</p>

<p>For that, we'll use two files,</p>

<ol><li>HTML file to display the data and load the Vue file.</li><li>The Vue file has the code.</li></ol>



<p><strong>HTML File:</strong></p>



<pre class="wp-block-code"><code>&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;!-- Load Vue --&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;

    &lt;!-- Load script file.  'defer' loads after body is generated --&gt;
    &lt;script src="vue_lists.js" defer&gt;&lt;/script&gt;

    &lt;style&gt;
        table,
        th,
        td {
            border: 1px solid #cccccc;
            border-collapse: collapse;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;North America&lt;/h1&gt;
    &lt;!-- Div where Vue runs --&gt;
    &lt;div id="app"&gt;
        &lt;h2&gt;Table&lt;/h2&gt;
        &lt;table&gt;
            &lt;tr&gt;
                &lt;th&gt;Country&lt;/th&gt;
                &lt;th&gt;Capital&lt;/th&gt;
                &lt;th&gt;Population&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;/td&gt;
                &lt;td&gt;&lt;/td&gt;
                &lt;td&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>



<p><strong>Vue.js File:</strong></p>



<p>In this file we're using 'countries_list' as the array that will contain the data. It's empty for now.</p>



<pre class="wp-block-code"><code>var app = new Vue({
    el: '#app',
    data: {
        countries_list: [],
    },
})</code></pre>



<h2>Loading Axios</h2>



<p>To use Axios in your application, you need to load it. We're keeping it simple, so we'll use the cdn, which we'll add to the HTML header.</p>



<pre class="wp-block-code"><code>&lt;!-- Load Axios --&gt;
    &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt; </code></pre>



<p>Now that it's loaded, you can access it in Vue.</p>



<h2>Get the Data</h2>



<p>Back to the drive-through metaphor. We're in the car (Axios), ready to head out. We know the location (url), we read the menu (documentation) so we know what to ask for (url string). <br>Let's place an order! </p>



<p>Based on the documentation, the request string should look like: <a href="https://restcountries.eu/rest/v2/region/americas">https://restcountries.eu/rest/v2/region/americas</a></p>



<p>Great!  We know how to get the data, now lets get it on the screen. The data should  display as soon as the page is loaded, so how do you do that?</p>



<h2>Hang It On A Hook</h2>



<p>Vue has a series of <a rel="noopener noreferrer" href="https://vuejs.org/v2/guide/instance.html" target="_blank">life cycle hooks</a> that fire at certain stages during loading. The '<strong>mounted</strong>' hook fires when the Dom is loaded.  That works!  We'll put the Axios call in there and set it up so we can have a look at the raw data in the console log.   </p>



<pre class="wp-block-code"><code>mounted() {
        axios
            .get('https://restcountries.eu/rest/v2/region/americas')
            .then(response =&gt; (
                console.log(response)
                ))
    }</code></pre>



<p><strong>Breakdown:</strong></p>



<table class="wp-block-table"><tbody><tr><td> mounted() { ...}</td><td> When the dom is loaded </td></tr><tr><td> axios </td><td> Tell Axios to... <br></td></tr><tr><td> .get (....)</td><td> ...use 'get' to go to this url and return the data </td></tr><tr><td>.then (...)<br></td><td> Once the data is returned...<br></td></tr><tr><td>response =&gt; ( <br>console.log(response)<br>)</td><td>... call the data 'response' and show it in the console log.  </td></tr></tbody></table>



<h2>Putting It Together</h2>



<p>The code should look something like this:</p>



<p><strong>HTML</strong></p>



<pre class="wp-block-code"><code>&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;!-- Load Vue --&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;

    &lt;!-- Load Axios --&gt;
    &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;

    &lt;!-- Load script file.  'defer' loads after body is generated --&gt;
    &lt;script src="vue_lists.js" defer&gt;&lt;/script&gt;

    &lt;style&gt;
        table,
        th,
        td {
            border: 1px solid #cccccc;
            border-collapse: collapse;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;North America&lt;/h1&gt;
    &lt;!-- Div where Vue runs --&gt;
    &lt;div id="app"&gt;
        &lt;h2&gt;Table&lt;/h2&gt;
        &lt;table&gt;
            &lt;tr&gt;
                &lt;th&gt;Country&lt;/th&gt;
                &lt;th&gt;Capital&lt;/th&gt;
                &lt;th&gt;Population&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;/td&gt;
                &lt;td&gt;&lt;/td&gt;
                &lt;td&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>



<p><strong>Vue.js File:</strong></p>



<pre class="wp-block-code"><code>var app = new Vue({
    el: '#app',
    data: {
        countries_list: [],
    },

    mounted() {
        axios
            .get('https://restcountries.eu/rest/v2/region/americas')
            .then(response =&gt; (
                console.log(response)
                ))
    }

})</code></pre>



<p>The data in the console log looks like this:</p>



<pre class="wp-block-code"><code>{data: Array(57), status: 200, statusText: "", headers: {…}, config: {…}, …}
config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
data: (57) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
headers: {content-type: "application/json;charset=utf-8", cache-control: "public, max-age=86400"}
request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: ""
__proto__: Object</code></pre>



<p>It has everything we need, plus a whole lot more!</p>



<h3>Pulling Out What You Need</h3>



<p>Like a drive-through, you need to unpack the package to get to the food / data.</p>



<p>What we're seeing here is the <em>full</em> response, the status, the headers, the whole package.  It's like being handed the bag at the drive-through window, we don't need the wrappers, just the food (data), so we need to unpack it a bit.  You can do that by tweaking the code to return the response.<strong>data</strong></p>



<pre class="wp-block-code"><code>.then(response =&gt; (
                console.log(response.data)
                ))</code></pre>



<p>Tip:  Because <em>response</em> returns everything, it's a good debugging tool.</p>



<p>The console log should look something like:</p>



<pre class="wp-block-code"><code>(57) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {name: "Anguilla", topLevelDomain: Array(1), alpha2Code: "AI", alpha3Code: "AIA", callingCodes: Array(1), …}
1: {name: "Antigua and Barbuda", topLevelDomain: Array(1), alpha2Code: "AG", alpha3Code: "ATG", callingCodes: Array(1), …}
2: {name: "Argentina", topLevelDomain: Array(1), alpha2Code: "AR", alpha3Code: "ARG", callingCodes: Array(1), …}</code></pre>



<p>That's better! </p>



<h3>Making the Data Workable</h3>



<p>The next step is to assign the data to a variable we can use to in the HTML file.</p>



<pre class="wp-block-code"><code>.then(response =&gt; (
                this.countries_list = response.data
                ))</code></pre>



<p>Now countries_list has the data, we'll set up the HTML page to display it.</p>



<h2>Displaying Data</h2>



<p>We already have the table set up in the HTML file, we just need to get the data in there.</p>



<p>Right now, data is in an array called 'countries_list'. The trick here is to loop through it and display it in the table. This is done by using '<a href="https://vuejs.org/v2/guide/list.html">v-for</a>', it's a kind of 'for loop' for Vue. You put inside an element that you want repeated for every record in the database.</p>



<p>Our example looks like:</p>



<pre class="wp-block-code"><code>&lt;tr v-for="country in countries_list"&gt;
    &lt;td&gt;{{country.name}}&lt;/td&gt;
    &lt;td&gt;{{country.capital}}&lt;/td&gt;
    &lt;td&gt;{{country.population}}&lt;/td&gt;
&lt;/tr&gt;</code></pre>



<p><strong>Breakdown:</strong></p>



<table class="wp-block-table"><tbody><tr><td> &lt;tr v-for="country in countries_list"&gt; </td><td>Create a<strong> &lt;tr&gt;</strong><br><strong>for</strong> every record <strong>in</strong> '<strong>coutry_list</strong>',<br>each record will be called '<strong>country</strong>'</td></tr><tr><td> <br>&lt;td&gt;{{country.name}}&lt;/td&gt;<br>&lt;td&gt;{{country.capital}}&lt;/td&gt;<br>&lt;td&gt;{{country.population}}&lt;/td&gt; </td><td>To display data in Vue, you use the double  curly brackets.<br>So, for each record, create the &lt;td&gt;<br>and wrap the data (called '<strong>country</strong>') <br>and the field (<strong>name</strong>, capital population etc.) in the <strong>curly brackets</strong></td></tr><tr><td>&lt;/tr&gt;</td><td>End of the row.</td></tr></tbody></table>



<p>The HTML page should look like:</p>



<pre class="wp-block-code"><code>&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;!-- Load Vue --&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;

    &lt;!-- Load Axios --&gt;
    &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;

    &lt;!-- Load script file.  'defer' loads after body is generated --&gt;
    &lt;script src="vue_lists.js" defer&gt;&lt;/script&gt;

    &lt;style&gt;
        table,
        th,
        td {
            border: 1px solid #cccccc;
            border-collapse: collapse;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;North America&lt;/h1&gt;
    &lt;!-- Div where Vue runs --&gt;
    &lt;div id="app"&gt;
        &lt;h2&gt;Table&lt;/h2&gt;
        &lt;table&gt;
            &lt;tr&gt;
                &lt;th&gt;Country&lt;/th&gt;
                &lt;th&gt;Capital&lt;/th&gt;
                &lt;th&gt;Population&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr v-for="country in countries_list"&gt;
                &lt;td&gt;{{country.name}}&lt;/td&gt;
                &lt;td&gt;{{country.capital}}&lt;/td&gt;
                &lt;td&gt;{{country.population}}&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>



<p>The table should look like:</p>



<table class="wp-block-table"><tbody><tr><th>Country</th><th>Capital</th><th>Population</th></tr><tr><td>Anguilla</td><td>The Valley</td><td>13452</td></tr><tr><td>Antigua and Barbuda</td><td>Saint John's</td><td>86295</td></tr><tr><td>Argentina</td><td>Buenos Aires</td><td>43590400</td></tr><tr><td>Aruba</td><td>Oranjestad</td><td>107394</td></tr><tr><td>Bahamas</td><td>Nassau</td><td>378040</td></tr><tr><td>Barbados</td><td>Bridgetown</td><td>285000</td></tr></tbody></table>



<p>We're getting somewhere!</p>



<h2>Using API's in an Element <br>(or How to Use Vue in &lt;img  and Other Tags)</h2>



<p>This API has a flag image for each country. That's a nice visual cue,  so let's add that beside the country.</p>



<p>Although you use the double curly brackets for displaying API data in Vue, <em>when you're applying it to an HTML element like an image tag, it works differently. </em></p>



<p>Here you <strong>use <a rel="noreferrer noopener" href="https://vuejs.org/v2/guide/syntax.html#Attributes" target="_blank">v-bind</a> to tie data to an attribute.</strong> So the image tag would look something like:</p>



<pre class="wp-block-code"><code>&lt;img v-bind:src="country.flag" alt="Flag" height="26" width="42"&gt;</code></pre>



<p>Let's add it to the table. </p>



<pre class="wp-block-code"><code>&lt;tr v-for="country in countries_list"&gt;
  &lt;td&gt;
     &lt;img v-bind:src="country.flag" alt="Flag" height="26" width="42"&gt; 
      {{country.name}}
   &lt;/td&gt;
   &lt;td&gt;{{country.capital}}&lt;/td&gt;
   &lt;td&gt;{{country.population}}&lt;/td&gt;
 &lt;/tr&gt;</code></pre>



<h2>Passing Parameters</h2>



<p>With this API, you can pass a parameter to it telling it what fields to return. We only need</p>



<ul><li>Country</li><li>Short form</li><li>Size</li><li>Population</li><li>Flag</li></ul>



<p>Based on the <a href="https://restcountries.eu/#filter-response">documentation</a>, the URL should look like:<br> <a href="https://restcountries.eu/rest/v2/region/americas?fields=name;capital;flag;population">https://restcountries.eu/rest/v2/region/americas?fields=name;capital;flag;population</a> </p>



<p>We can change the Axios call to:</p>



<pre class="wp-block-code"><code>mounted() {
        axios
            .get('https://restcountries.eu/rest/v2/region/americas?fields=name;capital;flag;population')
            .then(response =&gt; (
                this.countries_list = response.data,
                console.log(response.data)
                ))
    }</code></pre>



<p>Nothing has changed in the results but if you look in the console, you'll only see the data you need.  Easy, huh?</p>



<pre class="wp-block-code"><code>[{"flag":"https://restcountries.eu/data/aia.svg","name":"Anguilla","capital":"The Valley","population":13452},{"flag":"https://restcountries.eu/data/atg.svg","name":"Antigua and Barbuda","capital":"Saint John's","population":86295},{"flag":"https://restcountries.eu/data/arg.svg","name":"Argentina","capital":"Buenos Aires","population":43590400},{"flag":"https://restcountries.eu/data/abw.svg","name":"Aruba","capital":"Oranjestad","population":107394},
.....</code></pre>



<p>When passing the parameters in this case, it was simple -- a 'get' string. Of course some API's and apps are more complex and may require 'post' variables etc.  Axios does a nice job of passing variables among many other things.  For more info see:   <a href="https://github.com/axios/axios">https://github.com/axios/axios</a> </p>



<h2>Handling Errors &amp; Missing Data</h2>



<p>What happened if there's a problem? Data is not returned, the restaurant is closed, then what?</p>



<p>You use catch. Catch will, well, catches the error so you handle it gracefully. </p>



<pre class="wp-block-code"><code>.catch(error =&gt;(
                console.log(error)
                ));</code></pre>



<p>As a rule you let the user know that there was a problem. Although you could set up some code within catch error, it's probably easier to set up an <strong><a href="https://vuejs.org/v2/api/#v-if">v-if</a></strong> statement in the HTML file.</p>



<p>In this case, if the 'countries_list' is empty, then let the user know.  This can be done in the HTML page by adding another row that will display if the  countries_list.length is 0. </p>



<pre class="wp-block-code"><code>&lt;tr v-if="countries_list.length == 0"&gt;
    &lt;td colspan="3"&gt;
        No records found.
    &lt;/td&gt;
&lt;/tr&gt;</code></pre>



<p><strong>Breakdown:</strong></p>



<table class="wp-block-table"><tbody><tr><td>   &lt;tr v-if="countries_list.length == 0"&gt; </td><td>Create a<strong> &lt;tr&gt;</strong><br><strong>if</strong> the length of the array countries_list is zero</td></tr><tr><td> <br> &lt;td colspan="3"&gt;<br>     No records found.<br>  &lt;/td&gt; </td><td>Only 1 td is need to expand all three columns that should be there.  We still have 3 heading columns.</td></tr><tr><td>&lt;/tr&gt;</td><td>End of the row.</td></tr></tbody></table>



<p><strong>Important!</strong>  Make sure your 'error row' is outside of the rows generated if there is a list.  They are 2 different things!</p>



<p>Your table should look something like:</p>



<pre class="wp-block-code"><code>&lt;table&gt;
    &lt;!-- Header --&gt;
    &lt;tr&gt;
        &lt;th&gt;Country&lt;/th&gt;
        &lt;th&gt;Capital&lt;/th&gt;
        &lt;th&gt;Population&lt;/th&gt;
    &lt;/tr&gt;
    &lt;!-- Country List --&gt;
    &lt;tr v-for="country in countries_list"&gt;
        &lt;td&gt;
            &lt;img v-bind:src="country.flag" alt="Flag" height="26" width="42"&gt;
            {{country.name}}
        &lt;/td&gt;
        &lt;td&gt;{{country.capital}}&lt;/td&gt;
        &lt;td&gt;{{country.population}}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;!-- Error Row --&gt;
    &lt;tr v-if="countries_list.length == 0"&gt;
        &lt;td colspan="3"&gt;
            No records found.
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;</code></pre>



<h2>Final Product</h2>



<p>Our HTML code should look like:</p>



<pre class="wp-block-code"><code>&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;!-- Load Vue --&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;

    &lt;!-- Load Axios --&gt;
    &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;

    &lt;!-- Load script file.  'defer' loads after body is generated --&gt;
    &lt;script src="vue_lists.js" defer&gt;&lt;/script&gt;

    &lt;style&gt;
        table,
        th,
        td {
            border: 1px solid #cccccc;
            border-collapse: collapse;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;North America&lt;/h1&gt;
    &lt;!-- Div where Vue runs --&gt;
    &lt;div id="app"&gt;
        &lt;h2&gt;Table&lt;/h2&gt; 
        &lt;table&gt;
            &lt;!-- Header --&gt;
            &lt;tr&gt;
                &lt;th&gt;Country&lt;/th&gt;
                &lt;th&gt;Capital&lt;/th&gt;
                &lt;th&gt;Population&lt;/th&gt;
            &lt;/tr&gt;
            &lt;!-- Country List --&gt;
            &lt;tr v-for="country in countries_list"&gt;
                &lt;td&gt;
                    &lt;img v-bind:src="country.flag" alt="Flag" height="26" width="42"&gt;
                    {{country.name}}
                &lt;/td&gt;
                &lt;td&gt;{{country.capital}}&lt;/td&gt;
                &lt;td&gt;{{country.population}}&lt;/td&gt;
            &lt;/tr&gt;
            &lt;!-- Error Row --&gt;
            &lt;tr v-if="countries_list.length == 0"&gt;
                &lt;td colspan="3"&gt;
                    No records found.
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>



<p>Our Vue script should look like:</p>



<pre class="wp-block-code"><code>var app = new Vue({
    el: '#app',
    data: {
        countries_list: [],
    },

    mounted() {
        axios
            .get('https://restcountries.eu/rest/v2/region/americas?fields=name;capital;flag;population')
            .then(response =&gt; (
                this.countries_list = response.data
                ))
            .catch(error =&gt;(
                console.log(error)
                ));
    }

})</code></pre>



<p>And our list should look something like:</p>



<table><tbody><tr><th>Country</th> <th>Capital</th> <th>Population</th></tr> <tr><td><img src="https://restcountries.eu/data/aia.svg" alt="Flag" height="26" width="42">
                    Anguilla
                </td> <td>The Valley</td> <td>13452</td></tr><tr><td><img src="https://restcountries.eu/data/atg.svg" alt="Flag" height="26" width="42">
                    Antigua and Barbuda
                </td> <td>Saint John's</td> <td>86295</td></tr><tr><td><img src="https://restcountries.eu/data/arg.svg" alt="Flag" height="26" width="42">
                    Argentina
                </td> <td>Buenos Aires</td> <td>43590400</td></tr><tr><td><img src="https://restcountries.eu/data/abw.svg" alt="Flag" height="26" width="42">
                    Aruba
                </td> <td>Oranjestad</td> <td>107394</td></tr><tr><td><img src="https://restcountries.eu/data/bhs.svg" alt="Flag" height="26" width="42">
                    Bahamas
                </td> <td>Nassau</td> <td>378040</td></tr><tr><td><img src="https://restcountries.eu/data/brb.svg" alt="Flag" height="26" width="42">
                    Barbados
                </td> <td>Bridgetown</td> <td>285000</td></tr><tr><td><img src="https://restcountries.eu/data/blz.svg" alt="Flag" height="26" width="42">
                    Belize
                </td> <td>Belmopan</td> <td>370300</td></tr><tr><td><img src="https://restcountries.eu/data/bmu.svg" alt="Flag" height="26" width="42">
                    Bermuda
                </td> <td>Hamilton</td> <td>61954</td></tr>
</tbody></table>



<h2>To Sum Up</h2>



<p>Using API's in Vue is fairly straight forward.  Make sure you know how to get your data (the drive-through), assign it to an array variable and display it in HTML.  </p>



<h2>Resources</h2>



<p>For more information:</p>

<ul><li><a href="https://github.com/workingwebsites/vue-api">GitHub Code for this tutorial</a></li><li><a href="https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html">Using Axios to Consume API's</a></li><li><a href="https://github.com/axios/axios">Axios</a></li><li><a href="https://vuejs.org/v2/guide/list.html">Vue Lists</a></li><li><a href="https://dev.to/workingwebsites/using-vue-to-display-lists-6dn">Using Vue to Display Lists</a></li><li><a href="https://dev.to/workingwebsites/using-vue-in-wordpress-1b9l">Using Vue in WordPress</a></li></ul>
{% endraw %}