Practical Web Design

The API call

First, we will need to create the HTML tag that will hold everything. 

Let's create in our app an HTML tag <weather>:

<md-app-content>            <!-- OUR APP HERE -->            <weather></weather>          </md-app-content>

In the script section, let's create our first Vue function: 

Vue.component('weather', {    });

As we said earlier, we will need the data, the method, and the template to display the content. Let's start with the data: 

Vue.component('weather', {    data: function(){            return {                weatherLocation: '',                weatherApi: '05911854df7aa0be884df72549a75fd9',                weather: [],                displayWeather: false            }

        },});

The function will store the following things: 

• The location set by the user
• Our API Key
• The data pulled out from the API
• A boolean set to display or not display ...