How do I warn a user of unsaved changes before leaving a page in Vue
Are you using vue-router? I would look into navigation guards. I keep them in mind, but haven't used them myself yet. Here's the documentation on them: https://router.vuejs.org/guide/advanced/navigation-guards.html
Assuming you're using vue-router (and you probably should be), then you'll want to use the beforeRouteLeave
guard. The documentation even gives an example of this exact situation:
beforeRouteLeave (to, from , next) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
}
That can be added directly right on your component:
components: { ... },
mounted: { ... }
methods: { ... },
beforeRouteLeave (to, from, next) { ... }
These answers only cover navigation within Vue. If the user refreshes the page or navigates to a different site, that will not be caught. So you also need something like:
window.onbeforeunload = () => (this.unsavedChanges ? true : null);