vueでwindowを使うとエラーになる

画面のサイズを取りたい

vueでwindowを使って画面のサイズを取りたい時にハマってしまった

<script>
export default {
  computed: {
    windowSize: () => {
      return { x: window.innerWidth, y: window.innerHeight }
    }
  }
}
</script>

window is not defined

原因

コンポーネントのライフサイクルが関係しており、適切な場所でwindowを使わなければならない

ライフサイクル

解決策

mountedでwindowSizeをセットするように実行

<script>
  export default {
    data: () => ({
      windowSize: {
        x: 0,
        y: 0
      }
    }),

    mounted () {
      this.onResize()
    },

    methods: {
      onResize () {
        this.windowSize = { x: window.innerWidth, y: window.innerHeight }
      }
    }
  }
</script>

問題なくwindowを使うことができた！