Vuejs 'beforeunload' event not triggered as expected

Question

I have registered 'beforeunload' event on created hook of the component used by routes of vue router.

I want to call this event handler in order to remove user on browser tab close or browser tab refresh or browser close.

On ComponentA

created (){    
    window.addEventListener('beforeunload', () => {

        this.removeUser()

        return null
     })
}

Smilarly on ComponentB

created (){    
    window.addEventListener('beforeunload', () => {

        this.removeUser()

        return null
     })
}

And my router.js

{
  path: '/staff/call/:session_key',
  name: 'Staff Call',
  component: ComponentA,
  meta: {auth: true}
},
{
  path: '/consumer/call/:session_key',
  name: 'Consumer Call',
  component: ComponentB
},

Here 'beforeunload' event handler is triggered randomly. That is sometimes it get triggered and sometimes not. I count find any pattern when it is triggered and when it is not.

What am I missing here?

Answer 1

Edit
I'd guess the most likely culprit then is exactly what @PatrickSteele said. From MDN:

Note: To combat unwanted pop-ups, some browsers don't display prompts created in beforeunload event handlers unless the page has been interacted with; some don't display them at all. For a list of specific browsers, see the Browser_compatibility section.

I'd say it's likely you're seeing inconsistent behavior because you are sometimes not interacting with the page.

This may be a syntax error. created should be a method

created () {    
        window.addEventListener('beforeunload', this.removeUser)  
    },

    methods: {
      removeUser () {
        //remove user here
      }
    }

A fiddle working: https://jsfiddle.net/e6m6t4kd/3/

Answer 2

It's work for me. while do something before reload or close in vue.js

created() {
    window.onbeforeunload = function(){
           return "handle your events or msgs here";
    }
}