useLeaveGuard
Warns when the tab is closed or the page is reloaded while the form has unsaved changes. It doesn't interfere during submission or after a successful save.
Signature
ts
function useLeaveGuard(form: Form, options?: LeaveGuardOptions): () => void| Option | Description |
|---|---|
onBeforeRouteLeave | The onBeforeRouteLeave function from vue-router — then the warning also works for in-app navigation |
confirm | Your own confirmation dialog for in-app navigation: (message) => boolean | Promise<boolean>. Defaults to window.confirm |
message | Question text for in-app navigation |
Returns a function that removes the page-close warning. In a component you don't need to call it — the handler is removed automatically.
When a tab is closed the browser shows its own standard message — its text can't be changed.
Example
ts
import { onBeforeRouteLeave } from 'vue-router';
useLeaveGuard(form, {
onBeforeRouteLeave,
confirm: (message) => dialog.confirm({ title: message }), // e.g. a UI library dialog returning Promise<boolean>
message: 'Leave without saving?',
});