Check if fullscreen by watching document.fullscreenElement in Vue3

by

I would like to check when the document is in fullscreen. I tried to watch document.fullscreen like that but it does not work :

watch(document.fullscreenElement, (newValue) => {
  fullScreenActivated.value = newValue
})

It gives me this :

[Vue warn]: Invalid watch source:  null A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. 
  at <App> 2 runtime-core.esm-bundler.js:41

[Vue warn]: Invalid watch source:  document.fullscreenElement A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. 
  at <App>

I understand that you can not watch this element, but I don’t know how to do it another way. If somebody has an idea, I will be happy to know about it ! 🙂

  • Listen for fullscreenchange event. You can use premade Vueuse composable that covers common browser apis

    – 

Leave a Comment