Block unload in Browser and Inertia Router using Vue

beforeUnload.js

import { Inertia } from '@inertiajs/inertia'
import { onBeforeMount, onBeforeUnmount } from 'vue'

/**
 * @param {() => boolean} shouldBlockUnload
 * @param {string} message
 * @returns void
 */
export function useBeforeUnload(
    shouldBlockUnload,
    message = 'Are you sure you want to leave?'
) {
    function onBeforeUnload(event) {
        if (shouldBlockUnload()) {
            event.preventDefault()
            event.returnValue = message
        }
    }

    function onBefore(event) {
        if (!shouldBlockUnload()) return
        const confirmed = confirm(message)
        if (!confirmed) event.preventDefault()
    }

    let removeOnBefore = null
    onBeforeMount(() => {
        window.addEventListener('beforeunload', onBeforeUnload)
        removeOnBefore = Inertia.on('before', onBefore)
    })

    onBeforeUnmount(() => {
        window.removeEventListener('beforeunload', onBeforeUnload)
        if (removeOnBefore) removeOnBefore()
    })
}

form.vue

<template>
    <input v-model="form.name">
</template>

<script setup>

const form = useForm({
    name: '',
})

useBeforeUnload(
    () => form.isDirty,
    'You have unsaved changes. Are you sure you want to navigate away?'
)

</script>