How to disable the right-click and detect switching of the tab using Nuxt JS?

You can use the following piece of code to disable the right-click and detect switching of the tab in Nuxt JS.

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  created() {
    if (process.client) {
      document.addEventListener('visibilitychange', (event) => {
        if (document.visibilityState != 'visible') {
          alert('Tab Changed')
        }
      })

      document.addEventListener('contextmenu', (event) => {
        event.preventDefault()
        alert('Right Click Disabled')
      })

      document.onkeydown = function (event) {
        if (event.keyCode == 123) {
          // Prevent F12
          return false
        } else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) {
          // Prevent Ctrl+Shift+I
          return false
        }
      }
    }
  },
})
</script>

We are using the process.client, Because Nuxt JS is server-side rendered.

Comments