Edited at

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