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

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を使うことができた！