Update Notifications

Using the update strategies the module knows when a new version is deployed. You can use the built-in <SkewNotification> component or build your own using the useSkewProtection() composable.

Update notifications can be an annoying user experience if not handled properly. The module provides two hooks to differentiate between deployments:

• onAppOutdated() - triggers whenever a new version is detected.
• 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.

When the user's current chunks are outdated:

<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>

Please see the UI Examples guide for more user friendly notification patterns.

Server-Side Skew Detection

Detect outdated clients in server handlers using isClientOutdated:

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: '...' }
})