import{useBeforeUnload}from'@vueuse/core'// Basic usageconst{ setMessage, remove}=useBeforeUnload({message:'Are you sure you want to leave?'})// Dynamic messageconst{ setMessage}=useBeforeUnload()setMessage('You have unsaved changes!')// Remove the event listenerconst{ remove}=useBeforeUnload()remove()

exportinterfaceUseBeforeUnloadOptionsextendsConfigurableWindow{/**   * The message to show when the user tries to leave the page.   * This is used to show a confirmation dialog.   */message?:string}exportfunctionuseBeforeUnload(options?:UseBeforeUnloadOptions):{setMessage:(message:string)=>voidremove:()=>void}

<script setup>import {useBeforeUnload }from'@vueuse/core'const {setMessage,remove }=useBeforeUnload({  message:'You have unsaved changes. Are you sure you want to leave?'})</script>

<script setup>import {useBeforeUnload }from'@vueuse/core'import {ref }from'vue'consthasUnsavedChanges=ref(false)const {setMessage }=useBeforeUnload()// Update message based on statewatch(hasUnsavedChanges, (newValue)=> {if (newValue) {setMessage('You have unsaved changes. Are you sure you want to leave?')  }})</script>

<script setup>import {useBeforeUnload }from'@vueuse/core'import {computed }from'vue'constformData=ref({})consthasChanges=computed(()=>Object.keys(formData.value).length>0)const {setMessage,remove }=useBeforeUnload()watch(hasChanges, (newValue)=> {if (newValue) {setMessage('You have unsaved changes!')  }else {remove()  }})</script>