VUE Window Resizing check

vue에서 윈도우 사이즈 변경될때마다 윈도우 사이즈를 가져오고싶은데 구글링을 아무리 해봐도 원하는 결과가 나오지 않았는데 좀더 구글링 해서 찾았다!

 

router/index.js 에 추가해주고 사용할때는 $viewport.width 로 사용하면 width값을 가져올 수 있다!

// router/index.js

const updateSizes = (obj = {}) => {
  obj.width = window.innerWidth
  obj.height = window.innerHeight
  return obj
}

Object.defineProperty(Vue.prototype, '$viewport', {
  value: Vue.observable(updateSizes())
})

window.addEventListener('resize', (e) => {
  updateSizes(Vue.prototype.$viewport)
})