Create COVID-19 Website using Vue + axios to consume Laravel Lumen API

Good day friends!

Today we will explore how to create a website that will show COVID-19 data from the worldometers.info site using Vue and Laravel Lumen as an API.

For this case, we will use our API that we create before using Laravel Lumen and Swagger as documentation here: https://medium.com/@haniefhan/create-api-covid-19-data-using-laravel-lumen-and-swagger-as-documentation-24edd56ea0d0

In this article, we will create 2 page of website:

1. Latest Covid-19 cases
2. Top Ten Covid-19 cases

First thing first, we must run our API service using this command (in CLI) on our project folder:

php -S localhost:8000 public/index.php

Let’s check it on our browser is our API has running or not.

http://localhost:8000/api/documentation

Alright, it’s running smoothly. Let’s create Vue project to consume the API! 😎

Preparing the Machine

We must prepare our machine first before create vue project. In this article, we will use npm (abbreviation of Node Package Manager) command and vue-cli command.

Let’s check whether the machine we already know npm command. Open our CLI, then write this command:

npm

Ok, it has been installed.

Let’s check whether vue-cli has been installed on our machine using command:

vue

Ok, it’s has been installed too. 😇

If it’s not installed yet? Hmmm… I will create an article for it later or you can just find some article or tutorial how it’s done.😁

Creating Vue Project

To create vue project we can use this command:

vue create covid-19-vue

We will use Vue 2 with pick “Default([Vue 2] babel, eslint)” then press Enter. Installation process will run.

ps: I try using Vue 3, but I don’t know why axios package (for access the API) can’t work properly. That’s one of the reasons I pick Vue 2

Wait for a minute to process finished. Okay, after finished, let’s check is our installation went well.

cd covid-19-vue
npm run serve -- --port 3000

Let’s open it in our browser

http://localhost:3000

Ok, vue project has been installed. Because we want to create 2 pages website, we must install route on our project.

vue add router

Let’s see our project folder (I use Visual Studio Code for coding)

Alright, it’s finally ready! Let’s start our code! 😎

We will change name of file src/views/Home.vue to src/views/LatestCovidCases.vue to make our file name more relevant and obvious. Let’s start from its template.

Ups, we forgot to change the router, the error showed because we change filename:

• src/views/Home.vue to src/views/LatestCovidCases.vue and
• src/views/About.vue to src/views/TopTenCovidCases.php.

Let’s update our router. Open file src/router/index.php, change the content from this:

Into this:

Let’s not forget to change the menu label too. Open file “src/App.vue” change the template line with this:

This is the result.

The template is done, let’s move to the code of how get the data from Laravel Lumen API. In this page, I will use 2 API function:

1. Get country list using http://localhost:8000/get_countries , then put the result into select tag.
2. Get result of Covid-19 selected country case using http://localhost:8000/latest_covid_data the put the result into html tag.

We use axios package to access the API and use numeral to make the number more presentable. To add it in our project, we can use this command:

npm install axios
npm install numeral

This is the code we create for it. (file: src/views/LatestCovidCases.vue)

We create 4 methods in this code.

1. getCountries(), this method is for access the API http://localhost:8000/get_countriesand put the result into data countries
2. getCovidLatestData(), obvious from its name, this method is for access the API http://localhost:8000/latest_covid_data and put the result into some data (country_rank, country_name, total_cases, etc)
3. changeCountry(), this function wil be fired if we push button [Change Country]
4. resetValue(), this function will change all the data value to its default value. We use this function after we push button [Change Country]

Let’s look at it on browser.

Looks nice! 😍

Let’s move to the “Top Ten Covid Case” menu.

Open file src/views/LatestCovidCases.vue . Let’s create the the template first.

Let’s look the result on browser

http://localhost:3000/toptencases

Looks good. Let’s move to the javascript code. (file: src/views/LatestCovidCases.vue )

There’s just 1 method we use in this code. TopTenCovidCases(), this method is for access the API http://localhost:8000/top_ten_covid_casesand put the result into table.

We create 1 filter, formatNumber, this filter is to make number data more readable which add thousand separator in a number.

Let’s see the result on browser.

Alright, it’s running smoothly…😍

Conclusion and Github

Finally our simple Covid-19 website that created using Vue and consume Lumen Laravel API is done. 😁

By the way, you can see this project repository on my Github here.

Thank you for your time to read. Let’s join us again next time as we explore another interesting case! 😉