Skip to content

feat(useBeforeUnload): add new Function #4847

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(useBeforeUnload): add new Function #4847

wants to merge 2 commits into from
+418 −0

Conversation

ryanuo
Copy link

@ryanuo ryanuo commented Jun 30, 2025

useBeforeUnload

Reactive state to handle beforeunload event.

Usage

import { useBeforeUnload } from '@vueuse/core'

// Basic usage
const { setMessage, remove } = useBeforeUnload({
  message: 'Are you sure you want to leave?'
})

// Dynamic message
const { setMessage } = useBeforeUnload()
setMessage('You have unsaved changes!')

// Remove the event listener
const { remove } = useBeforeUnload()
remove()

Type Declarations

export interface UseBeforeUnloadOptions extends ConfigurableWindow {
  /**
   * The message to show when the user tries to leave the page.
   * This is used to show a confirmation dialog.
   */
  message?: string
}

export function useBeforeUnload(options?: UseBeforeUnloadOptions): {
  setMessage: (message: string) => void
  remove: () => void
}

Parameters

Name Type Default Description
options UseBeforeUnloadOptions {} Options object

UseBeforeUnloadOptions

Name Type Default Description
window Window defaultWindow Custom window instance
message string undefined Message to show in confirmation dialog

Return Value

Name Type Description
setMessage (message: string) => void Function to set a new message
remove () => void Function to remove the event listener

Examples

Basic Usage

<script setup>
import { useBeforeUnload } from '@vueuse/core'

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

Dynamic Message

<script setup>
import { useBeforeUnload } from '@vueuse/core'
import { ref } from 'vue'

const hasUnsavedChanges = ref(false)
const { setMessage } = useBeforeUnload()

// Update message based on state
watch(hasUnsavedChanges, (newValue) => {
  if (newValue) {
    setMessage('You have unsaved changes. Are you sure you want to leave?')
  }
})
</script>

Conditional Usage

<script setup>
import { useBeforeUnload } from '@vueuse/core'
import { computed } from 'vue'

const formData = ref({})
const hasChanges = computed(() => Object.keys(formData.value).length > 0)

const { setMessage, remove } = useBeforeUnload()

watch(hasChanges, (newValue) => {
  if (newValue) {
    setMessage('You have unsaved changes!')
  }
  else {
    remove()
  }
})
</script>

@dosubot dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. enhancement New feature or request new function labels Jun 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
enhancement New feature or request new function size:L This PR changes 100-499 lines, ignoring generated files.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@ryanuo