I have a VueJS2 app running inside Electron 18.2 and I'm trying to implement a feature where a specific div goes full screen when a button is clicked.
Below is the code snippet I am using for this functionality:
console.log("fullscreenEnabled", document.fullscreenEnabled)
if (!document.fullscreenElement) {
if (this.$refs["container"].requestFullscreen) {
this.$refs["container"]
.requestFullscreen()
.then(() => console.log("fullscreen works"))
.catch(e => console.log("toggleFullscreen error", e))
}
} else {
console.log("exit")
if (document.exitFullscreen) {
document.exitFullscreen()
}
}
The element with ref attribute of "container" is the one that should go full screen, and it's confirmed that document.fullscreenEnabled returns true.
When testing this code on a fresh Electron project of the same version, it works perfectly fine without any issues. However, in my current project, no output is shown in the console and the div does not expand to full screen upon clicking the button assigned with @click="toggleFullScreen"
I am wondering if there could be some Electron settings that are preventing the fullscreen API from functioning properly in this specific project. Since I did not create the project myself but only need to add this function, I am uncertain about the configurations that may be affecting it.
The project utilizes VueJS2, Nuxt2, Electron 18.2, and Vuetify framework.
Your insights and suggestions would be greatly appreciated. Thank you.