vue-unsaved-changes-guard

vue-unsaved-changes-guard

A small Vue 3 composable that warns users before leaving a page with unsaved changes.

It supports both browser refresh/close events and Vue Router navigation.

Installation

npm install vue-unsaved-changes-guard

Requirements

• Vue 3.5+
• Vue Router 5+

Usage

import { ref } from 'vue'
import { useUnsavedChangesGuard } from 'vue-unsaved-changes-guard'

const isDirty = ref(false)

useUnsavedChangesGuard({
  isDirty,
})

Options

useUnsavedChangesGuard({
  isDirty,
  message,
  confirmLeave,
})

Option	Type	Required	Description
isDirty	Ref<boolean>		Indicates whether there are unsaved changes.
message	string		Custom confirmation message.
confirmLeave	() => boolean | Promise<boolean>		Custom confirmation handler.

Default behavior

If confirmLeave is not provided, the browser confirmation dialog is used.

useUnsavedChangesGuard({
  isDirty,
})

Custom confirmation

useUnsavedChangesGuard({
  isDirty,
  confirmLeave: async () => {
    return await showConfirmationModal()
  },
})

API

The composable returns a single function.

const { canLeave } = useUnsavedChangesGuard(...)

Property	Type
canLeave	() => Promise<boolean>

License

MIT