Computed property reactive to window.innerwidth in VueJS

Question

Basically, what I need is a computed property that returns true when the window.innerwidth is equal or lower than 768px and false when it's higher than 768px.

What I did:

computed: {
  isMobile() {
    if (window.innerWidth <= 768) {
      return true
    } 
    return false
  }
}

But that computes that property only once, and if I resize the window later, it doesn't react to that change. What can I do?

Answer 1

Add an eventlistener to the window like so:

new Vue({
  el: "#app",
  data() { return { windowWidth: window.innerWidth } },
  mounted() {
    window.addEventListener('resize', () => {
      this.windowWidth = window.innerWidth
      console.log(this.isMobile)
    })
  },
  computed: {
    isMobile() {
      return this.windowWidth <= 768
    }
  }
})

Answer 2

Computed properties are only updated when their depedencies change, therefore here isMobile won't be reactive.

Answer 3

An other possibily is to use Vuetify:

computed: {
  isMobile() {
    return this.$vuetify.breakpoint.smAndDown
  },
},

src: https://vuetifyjs.com/en/features/breakpoints/#breakpoint-service-object