How do I warn a user of unsaved changes before leaving a page in Vue

In Vue, if users make changes on the page but haven't saved them and attempt to leave the page, we can warn users by using the browser's beforeunload event. This can be achieved by adding the appropriate event listener in the Vue component.

Step 1: Set a data property to track changes

First, we need to set a flag (e.g., isDirty) in the Vue component's data function to track whether users have made unsaved changes.

javascript
data() {
  return {
    isDirty: false
  };
}

Step 2: Listen for data changes

When users input data in the form, we can set isDirty to true to indicate unsaved changes.

javascript
methods: {
  handleChange() {
    this.isDirty = true;
  }
}

Step 3: Use beforeunload event to warn

Next, we need to add a listener for the beforeunload event in the mounted hook and remove it in the beforeDestroy hook to ensure it's only added when the component is loaded and unloaded.

javascript
mounted() {
  window.addEventListener('beforeunload', this.handleBeforeUnload);
},
beforeDestroy() {
  window.removeEventListener('beforeunload', this.handleBeforeUnload);
},
methods: {
  handleBeforeUnload(event) {
    if (this.isDirty) {
      const message = 'You have unsaved changes. Are you sure you want to leave?';
      event.returnValue = message; // Standard way
      return message; // For compatibility with older browsers
    }
  }
}

Notes

• Browser Compatibility: Different browsers may support the beforeunload event differently; some may not display custom messages and only show the default warning.
• User Experience: Frequently using beforeunload warnings may affect user experience, so it's best to use them only when necessary.

By following these steps, we can effectively remind users to save changes before leaving the page, thus avoiding data loss.