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:
- Latest Covid-19 cases
- 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
tosrc/views/LatestCovidCases.vue
andsrc/views/About.vue
tosrc/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:
- Get country list using
http://localhost:8000/get_countries
, then put the result into select tag. - 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.
getCountries()
, this method is for access the APIhttp://localhost:8000/get_countries
and put the result into datacountries
getCovidLatestData()
, obvious from its name, this method is for access the APIhttp://localhost:8000/latest_covid_data
and put the result into some data (country_rank
,country_name
,total_cases
, etc)changeCountry()
, this function wil be fired if we push button[Change Country]
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_cases
and 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! 😉