The first component we will create is the main weather component. We need the following three properties attached to it:
- Data
- Methods
- Template
The data array will need the data points of the following components:
- weatherLocation: This will store the location entered in the input
- weatherApi: This is your open weather API key http://openweathermap.org/appid
- weather: We will store the results of the API in this component
- displayWeather: We will set a value of true or false (Boolean) if we want to display the data
To make a call to the OpenWeather API, we will use Vue resource method for .get(). The results of this method will be stored in the weather data point and then set the displayWeather data point to true.