過去バージョン

• Vue.js でブラウザの画面サイズを取得する方法
• 基本: window.innerWidth / window.innerHeight を data に保持
• mounted で window.addEventListener('resize', ...) を登録、beforeDestroy で解除
• タッチデバイス対応やレスポンシブ分岐に使う

<template>

  <div>

    {{ windowWidth }}

    {{ windowHeight }}

  </div>

</template>

<script>

export default {

  data() {

    return {

      windowWidth: window.innerWidth,

      windowHeight: window.innerHeight,

    }

  },

  methods: {

    getWindowSize: function() {

      this.windowWidth = window.innerWidth;

      this.windowHeight = window.innerHeight;

    }

  },

  mounted() {

    window.addEventListener('resize', this.getWindowSize);

  },

}

</script>