VueProject/src/App.vue

<template>
  <div ref="app" id="app" v-bind:class="computedPad">
    <!-- <NavBar /> -->

    <router-view> </router-view>
    <!-- <Footer /> -->
    <!-- <Sidebar /> -->
  </div>
</template>

<script>
import store from "@/store/index";

export default {
  name: "App",
  data: () => {
    return {
      class: "app",
    };
  },
  mounted() {},
  created() {
    window.addEventListener("resize", this.myEventHandler);
  },
  destroyed() {
    window.removeEventListener("resize", this.myEventHandler);
  },
  computed: {
    computedPad: function() {
      return this.class;
    },
  },
  mounted() {
    console.log("Width on load: " + this.$refs.app.clientWidth);
    var width = this.$refs.app.clientWidth;
    if (width < 850 && this.class !== "appMobile") {
      console.log("Changed class");
      this.class = "appMobile";
    } else if (width > 850 && this.class !== "app") {
      this.class = "app";
    }
  },
  methods: {
    myEventHandler(e) {
      //console.log(e.currentTarget.innerWidth);
      var width = e.currentTarget.innerWidth;
      if (width < 1000 && this.class !== "appMobile") {
        console.log("Changed class");
        this.class = "appMobile";
      } else if (width > 1000 && this.class !== "app") {
        this.class = "app";
        console.log("Changed class");
      }
    },
    handler() {
      var args = arguments;
      for (var arg of args) {
        if (arg instanceof Function) {
          arg();
        }
      }
    },
  },
};
</script>

<style>
.app {
  margin-top: 100px;
  padding-bottom: 5rem;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.appMobile {
  margin-top: 100px;
  padding-bottom: 21rem;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>