code snippets

Vue Snippet – Detect if the user navigates to another tab


Detect if a user has navigated away from the web page.

Framework: Vue

<script>
export default {
  mounted () {
    document.addEventListener('visibilitychange', this.handleVisibility, false)
  },
  methods: {
    handleVisibility () {
      if (document.visibilityState === 'hidden') {
        // pause animation, video, etc
      } else {
        // continue operation
      }
    }
  }
};
</script>

Use cases

  • Stop animation while the page is in the background
  • Pause video in the background


Share on social media

//