Vue Window Fullscreen

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <h3>Vue Js Toggle Fullscreen</h3>
  <div id="app">
    <p v-if="fullscreen">App is in fullscreen mode</p>
    <p v-else>App is not in fullscreen mode</p>
    <button v-if="!fullscreen" @click="toggleFullScreen">Fullscreen</button>
    <button v-if="fullscreen" @click="exitFullScreen">Exit Fullscreen</button>
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data: {
        fullscreen: false,  // Whether the app is currently in fullscreen mode
      },
      methods: {
        toggleFullScreen() {
          // If the document is not currently in fullscreen mode, request fullscreen
          if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen();
          }
          // Otherwise, exit fullscreen mode
          else {
            document.exitFullscreen();
          }
        },

exitFullScreen() {
          // Exit fullscreen mode
          document.exitFullscreen();
        },

updateFullScreenState() {
          // Update the fullscreen state based on whether the document is in fullscreen mode
          this.fullscreen = Boolean(document.fullscreenElement);
        }
      },

// Define lifecycle hooks to automatically update the fullscreen state of the app
      created() {
        // Add an event listener to update the fullscreen state when the app is created
        this.updateFullScreenState();

// Add an event listener to update the fullscreen state when the document enters or exits fullscreen mode
        document.addEventListener("fullscreenchange", this.updateFullScreenState);
      },
      destroyed() {
        // Remove the event listener for updating the fullscreen state when the app is destroyed
        document.removeEventListener("fullscreenchange", this.updateFullScreenState);
      }
    });
  </script>
</body>
</html>