Next, we will set up the Home page of our application since it incorporates all our three API endpoints and hence is more complex.   The setup of the rest of the application pages can be done as an exercise. 

A typical Vue component has the template for the HTML, the script containing the logic, the data to be used in the template, and a style block for our CSS styles.

We import our component out previously created  components NewsBySource,Weather and CurrencyRates   into our Home page component. 

In the case of the news-by-source component we bind the source (category) to the prop as follows. 

   <news-by-source v-bind:source="'home'"></news-by-source>

<template>
  <div class="container">
    <div class="row">
      <main class="posts-listing col-lg-8">
        <div class="container">
          <news-by-source v-bind:category="'home'"></news-by-source>
        </div>
      </main>
      <aside class="col-lg-4">
        <weather></weather>
        <currency-rates></currency-rates>
      </aside>
    </div>
  </div>
</template>

<script>

import NewsBySource from "../widgets/NewsBySource";
import Weather from "../widgets/Weather";
import CurrencyRates from "../widgets/CurrencyRates";

export default {
  name: "HomePage",
  data() {
    return {
      msg: "Welcome to Home Page"
    };
  },
  components: {
    "news-by-source": NewsBySource,
    weather: Weather,
    "currency-rates": CurrencyRates
  }
};
</script>

<style scoped></style>