kengee-data-screen/src/App.vue

<template>
  <div id="app">
    <div class="flex">
      <apps-nav/>
      <router-view class="components fill"/>
    </div>
  </div>
</template>

<style>
html, body, #app {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

#app > .flex {
  height: 100%;
}

.pb-10 {
  padding-bottom: 10px;
}
.mb-10{
  margin-bottom: 10px;
}

.components {
  background: #07193D;

}
</style>
<script>
import AppsNav from "@/components/appsNav.vue";

export default {
  name: "App",
  components: {AppsNav},
  methods: {
    scaleByAspect() {
      const targetWidth = 1920;
      const targetHeight = 1080;
      const ratio = targetWidth / targetHeight;
      const element = this.$el.querySelector('.components');
      const {width: originalWidth, height: originalHeight} = element.getBoundingClientRect();
      const ratioHeight = originalWidth / ratio;
      let scale
      if (ratioHeight < originalHeight) {
        scale = originalWidth / targetWidth;
      } else {
        scale = originalHeight / targetHeight;
      }

      element.style.transform = `scale(${scale})`;
      element.style.width = '1920px'
      element.style.height = '1080px'
      element.style.transformOrigin = 'top center';
    }
  },
  mounted() {
    this.scaleByAspect()
  }
}
</script>