[Vuejs]-How can I react to whether the browser is in fullscreen mode?

0๐Ÿ‘

โœ…

I developed a solution using a combination of this answer and this answer.

In your mounted function, add an event listener:

mounted: function () {
  const vm = this
  window.addEventListener('resize', () => {
    vm.windowInnerHeight = window.innerHeight
  })
},

Add the necessary windowInnerHeight variable in your data section:

data () {
  return {
    windowInnerHeight: undefined,
  }
},

Add a computed property:

computed: {
  applicationIsInFullscreenMode () {
    return this.windowInnerHeight === screen.availHeight
  }
},

And then you can use that computed property in your template like this:

{{ applicationIsInFullscreenMode ? '🗗︎' : '๐Ÿ—–' }}

Leave a comment