Composables
useVersionUpdated
Detect when a new version of the application is available and notify users to refresh.
The useVersionUpdated composable hooks into Nuxt's app manifest update system to detect when a new version of the application has been deployed. It provides a reactive boolean that becomes true when a new version is available, allowing you to prompt users to refresh their browser.
Basic Usage
<script setup lang="ts">
const { isNewVersionAvailable } = useVersionUpdated()
// Show a toast notification when a new version is detected
watch(isNewVersionAvailable, (isAvailable) => {
if (isAvailable) {
const toast = useToast()
toast.add({
title: 'Update Available',
description: 'A new version is available. Refresh to update.',
actions: [{
label: 'Refresh',
click: () => window.location.reload(),
}],
})
}
})
</script>
Return Value
Returns an object with:
isNewVersionAvailable- Read-only reactive ref that becomestruewhen a new version is detected
Examples
Update Banner
<script setup lang="ts">
const { isNewVersionAvailable } = useVersionUpdated()
function handleRefresh() {
window.location.reload()
}
</script>
<template>
<div v-if="isNewVersionAvailable" class="fixed top-0 inset-x-0 z-50">
<UAlert
color="primary"
variant="solid"
title="New Version Available"
description="Please refresh to get the latest updates."
:actions="[{
label: 'Refresh Now',
click: handleRefresh,
}]"
/>
</div>
</template>