A beautiful unsaved changes dialog, inspired by a component from the Squarespace admin.
lodash.throttle
, an extra 2KB)npm i vue-unsaved-changes-dialog
<VueUnsavedChangesDialog
:title="Unsaved Changes"
:subtitle="['You have unsaved changes', 'Would you like to save or discard them?']"
:show="shouldShowDialog"
@cancel="cancelFn"
@discard="discardFn"
@save="saveFn"/>
You’ll need NPM and the Vue CLI.
npm install
npm run serve
You’ll need to install Rollup.js to run the build script. Install it with npm install --g rollup
npm run build
Running the build script generate main
(.ssr.js
), module
(.esm.js
), and unpkg
(.min.js
) versions in the dist
directory.
Inspired by the Squarespace unsaved changes dialog
The component development template I used is vue-sfc-rollup by Team Innovation
Author: AnalyzePlatypus
Live Demo: https://vue-unsaved-changes-dialog.netlify.com/
GitHub: https://github.com/AnalyzePlatypus/vue-unsaved-changes-dialog
#vuejs #javascript #vue-js