---
title: "Update Notifications"
description: "React to version updates using useSkewProtection() composable."
canonical_url: "https://nuxtseo.com/docs/skew-protection/guides/immediate-updates"
last_updated: "2026-05-07T16:36:57.361Z"
---

Using the [update strategies](/docs/skew-protection/guides/update-strategies) the module knows when
you deploy a new version. You can use the built-in [`<SkewNotification>`](/docs/skew-protection/api/skew-notification) component or build your own using the
[`useSkewProtection()`](/docs/skew-protection/api/use-skew-protection) composable.

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

- [`onAppOutdated()`](/docs/skew-protection/api/use-skew-protection#onappoutdated) - triggers whenever it detects a new version.
- [`onCurrentChunksOutdated()`](/docs/skew-protection/api/use-skew-protection#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:

```vue [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>
```

Please see the [UI Examples](/docs/skew-protection/guides/ui-examples) guide for more user friendly notification patterns.

## Server-Side Skew Detection

Detect outdated clients in server handlers using [`isClientOutdated()`](/docs/skew-protection/nitro-api/is-client-outdated):

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