In this exercise, we will build a component that we can use to display the weather of a location in VueJS. This component will be created with a location search textbox; this will then search for http://openweathermap.org/, which is a free weather API, so we can get the information for the location-based search.
Let's create a simple HTML file. For this exercise, we'll not use Bootstrap but, instead, use another library and take a look at how easy it is. We'll use Vue Material, which is a library based on Google Material design. You can check it out at https://vuematerial.io/:
Vue Material
Let's head to their installation instruction by clicking on Getting started. Fortunately, they provide a CDN with a template ready to use. Let's copy their template and paste it into our HTML file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport...