proginn-frontend/pages/index.vue

<template>
  <section id="proginn-container">
    <proginn-header v-if="isPC != -1 && isPC"/>
    <router-view v-if="isPC != -1" id="main"/>
    <proginn-footer v-if="isPC != -1 && isPC"/>
  </section>
</template>

<script>
import ProginnHeader from '@/components/header'
import ProginnFooter from '@/components/footer'
import { mapState, mapMutations } from 'vuex'

export default {
  components: {
    ProginnHeader,
    ProginnFooter
  },
  computed: {
    ...mapState(['isPC']),
  },
  mounted() {
    this.checkInnerWidth()
    window.addEventListener('resize', this.checkInnerWidth)
  },
  methods: {
    ...mapMutations(['updateIsPC']),
    checkInnerWidth() {
      this.updateIsPC({
        isPC: window.innerWidth > 960,
      })
    }
  }
}
</script>

<style>
#proginn-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#main {
  flex: 1;
}
</style>