Squarespace Inspired Unsaved Changes Dialog Component For Vue

Install & Download:

# NPM
$ npm i vue-unsaved-changes-dialog

Description:

A Vue.js component to help create an ‘Unsaved Changes’ dialog popup inspired by Squarespace.

How to use it:

1. Import and register the Unsaved Changes Dialog Component.

import UnsavedChangesDialog from 'vue-unsaved-changes-dialog';

export default {
  // ...
  components: {
    UnsavedChangesDialog
  },
  // ...
}

2. Enable a button to trigger the dialog.

<button @click="attemptToGoBack">Back</button>

<UnsavedChangesDialog
  :title="Unsaved Changes"
  :subtitle="['You have unsaved changes', 'Would you like to save or discard them?']"
  :show="shouldShowDialog"
  @cancel="closePopup"
  @discard="discard"
  @save="save"/>

export default {
  name: 'App',
  data() {
    return {
      shouldShowDialog: false,
    }
  },
  methods: {
    attemptToGoBack() {
      this.hasUnsavedChanges ? 
        this.showPopup() :
        this.exit();
    },
    exit() {
      this.closePopup();
      // and leave the view
    },
    showPopup() {
      this.shouldShowDialog = true;
    },
    closePopup() {
      this.shouldShowDialog = false;
    },
    discard() {
      this.discardEdits();
      this.exit();
    },
    discardEdits() {
      // your code here
    },
    async save() {
      try {
        await this.saveChangesToServer();
        this.exit();
      } catch(e) {
        console.error(e);
      }
    },
    async saveChangesToServer() {
      // your code here
    }
  },
  computed: {
    hasUnsavedChanges() {
      // check for unsaved changes
    }
  },
  components: {
    UnsavedChangesDialog
  }
}

Preview: