Clear and concise description of the problem

I was looking for an easy way to setup a leave guard, its common when you make changes to a page and didn't save them. A confirm dialog would normally popup before you close or leave the page. Having an easy way to set this up would be a great addition.

Suggested solution

I created my own use function but essentially you listen to the beforeunload event. This will occur when user closes the page. The other one is using vue-router when using a link to navigate away and hooking into router.beforeEach to prevent navigation.

Alternative

Using the default confirm maybe by default. Customizing the text. Or some sort of callback so the developer can create a function to return true or false on whether to leave or not.

Additional context

You could return a ref that the developer can use to toggle whether he wants the dialog to appear or not. Maybe some options to adjust the confirm message.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.