App.vue

<template>
  <!--  -->
  <v-app>
    <div class="main">
    <WeatherMap id="weathermap"></WeatherMap>
    <Legend id="legend"></Legend>
    </div>
  </v-app>
  
</template>

<style scoped>
    .main {
        width:  100%;
        height: 100%;
    }
    #legend{
      width:20%;
      height:inherit;
      position:relative;
      float:left;
    }
    #weathermap{
      width:80%;
      height:inherit;
      position:relative;
      float:left;
    }
</style>

<script lang="ts">
import { Component, Vue} from 'vue-property-decorator';
import 'ol/ol.css';
import WeatherMap from './src/WeatherMap.vue';
import Legend from './src/Legend.vue';

@Component({
    components: {WeatherMap, Legend}
})
export default class App extends Vue{
    name: 'App'
}
</script>