Update Notifications
The module uses update strategies to detect deployments. You can use the built-in <SkewNotification> component or build your own using the
useSkewProtection() composable.
Choose when to notify users with these hooks:
onAppOutdated(): triggers whenever it detects a new version.onCurrentChunksOutdated(): triggers only when the user's loaded chunks are invalidated by the new deployment.
Setting Up Notifications
The <SkewNotification> component is a client-only wrapper around the useSkewProtection() composable.
This template shows a notification when the user's current chunks become outdated:
app.vue
<template>
<SkewNotification v-slot="{ isCurrentChunksOutdated }">
<Transition name="slide-up">
<div v-if="isCurrentChunksOutdated" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-blue-600 text-white px-4 py-2 rounded shadow">
An update is available. Please refresh the page.
</div>
</Transition>
</SkewNotification>
</template>See UI Examples for more notification templates.
Server-Side Skew Detection
Detect outdated clients in server handlers using isClientOutdated():
server/api/data.ts
import { isClientOutdated } from 'nuxt-skew-protection/server'
export default defineEventHandler((event) => {
if (isClientOutdated(event)) {
setResponseStatus(event, 409)
return { error: 'Client outdated', requiresReload: true }
}
return { data: '...' }
})Was this page helpful?