---
title: "Update Notifications · Nuxt Skew Protection · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/skew-protection/guides/immediate-updates"
last_updated: "2026-08-16T10:15:27.312Z"
meta:
  description: "React to version updates using useSkewProtection() composable."
  "og:description": "React to version updates using useSkewProtection() composable."
  "og:title": "Update Notifications · Nuxt Skew Protection · Nuxt SEO"
---

Nuxt SEO on GitHub

Switch to Skew ProtectionSwitch to Nuxt SEOSwitch to RobotsSwitch to SitemapSwitch to OG ImageSwitch to Schema.orgSwitch to Link CheckerSwitch to SEO UtilsSwitch to Site ConfigSwitch to AI Ready

**Core Concepts**

# **Update Notifications**

Using the [**~~update strategies~~**](https://nuxtseo.com/docs/skew-protection/guides/update-strategies) the module knows when you deploy a new version. You can use the built-in [`**<SkewNotification>**`](https://nuxtseo.com/docs/skew-protection/api/skew-notification) component or build your own using the [`**useSkewProtection()**`](https://nuxtseo.com/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()**`](https://nuxtseo.com/docs/skew-protection/api/use-skew-protection#onappoutdated) - triggers whenever it detects a new version.
- [`**onCurrentChunksOutdated()**`](https://nuxtseo.com/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:

app.vue

```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~~**](https://nuxtseo.com/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()**`](https://nuxtseo.com/docs/skew-protection/nitro-api/is-client-outdated):

server/api/data.ts

```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?**

### **Related **

[**useSkewProtection()**](https://nuxtseo.com/docs/skew-protection/api/use-skew-protection)

[**isClientOutdated()**](https://nuxtseo.com/docs/skew-protection/nitro-api/is-client-outdated)

[**Check for Update Strategy** Choose the best update detection strategy for your platform.](https://nuxtseo.com/docs/skew-protection/guides/update-strategies) [**Performance** Optimize skew protection for high-traffic applications.](https://nuxtseo.com/docs/skew-protection/guides/performance)