---
title: "Update Notifications"
description: "React to version updates with the useSkewProtection() composable."
canonical_url: "https://nuxtseo.com/docs/skew-protection/guides/immediate-updates"
last_updated: "2026-09-26T06:08:19.232Z"
---

The module uses [update strategies](/docs/skew-protection/guides/update-strategies) to detect deployments. You can use the built-in [`<SkewNotification>`{lang="html"}](/docs/skew-protection/api/skew-notification) component or build your own using the
[`useSkewProtection()`{lang="ts"}](/docs/skew-protection/api/use-skew-protection) composable.

Choose when to notify users with these hooks:

- [`onAppOutdated()`{lang="ts"}](/docs/skew-protection/api/use-skew-protection#onappoutdated): triggers whenever it detects a new version.
- [`onCurrentChunksOutdated()`{lang="ts"}](/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>`{lang="html"} component is a client-only wrapper around the `useSkewProtection()`{lang="ts"} composable.

This template shows a notification when the user's current chunks become 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>
```

See [UI Examples](/docs/skew-protection/guides/ui-examples) for more notification templates.

## Server-Side Skew Detection

Detect outdated clients in server handlers using [`isClientOutdated()`{lang="ts"}](/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: '...' }
})
```

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.