---
title: "<SkewNotification> · Nuxt Skew Protection · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/skew-protection/api/skew-notification"
last_updated: "2026-08-16T10:10:41.658Z"
meta:
  description: "Headless component for displaying update notifications."
  "og:description": "Headless component for displaying update notifications."
  "og:title": "<SkewNotification> · 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

**Nuxt API**

# **\<SkewNotification>**

A headless Vue component that gives you notification logic without imposing any UI.

This component uses `**useSkewProtection()**` internally and auto-connects on mount. For manual connection control (lazy mode), use the composable directly with `**useSkewProtection({ lazy: true })**`.

## Basic Usage

```vue
<template>
  <SkewNotification v-slot="{ isCurrentChunksOutdated, dismiss, reload, timeAgo }">
    <div v-if="isCurrentChunksOutdated" class="notification">
      <p>New version available! ({{ timeAgo }})</p>
      <button @click="reload">
        Reload
      </button>
      <button @click="dismiss">
        Dismiss
      </button>
    </div>
  </SkewNotification>
</template>
```

## Slot Props

The component gives you these props via scoped slot:

### `**version**`

- Type: `**string**`

The user's current version (from cookie or buildId).

```vue
<SkewNotification v-slot="{ version }">
  <div>
    <p>Current version: {{ version }}</p>
  </div>
</SkewNotification>
```

### `**isCurrentChunksOutdated**`

- Type: `**boolean**`

Whether the notification should be shown.

Automatically set to `**true**` when:

- User's loaded modules are invalidated by a new deployment
- Can be manually controlled via the `**open**` prop

```vue
<SkewNotification v-slot="{ isCurrentChunksOutdated }">
  <div v-if="isCurrentChunksOutdated">
    Update available!
  </div>
</SkewNotification>
```

### `**dismiss()**`

- Type: `**() => void**`

Dismiss the notification (sets `**isCurrentChunksOutdated**` to `**false**`).

```vue
<SkewNotification v-slot="{ isCurrentChunksOutdated, dismiss }">
  <div v-if="isCurrentChunksOutdated">
    <p>Update available!</p>
    <button @click="dismiss">Not now</button>
  </div>
</SkewNotification>
```

### `**reload()**`

- Type: `**() => void**`

Reload the page to get the new version.

Calls `**window.location.reload()**`.

```vue
<SkewNotification v-slot="{ isCurrentChunksOutdated, reload }">
  <div v-if="isCurrentChunksOutdated">
    <button @click="reload">Update Now</button>
  </div>
</SkewNotification>
```

### `**timeAgo**`

- Type: `**string**`

Human-readable time since the release.

Examples: "just now", "2 minutes ago", "1 hour ago"

```vue
<SkewNotification v-slot="{ isCurrentChunksOutdated, timeAgo }">
  <div v-if="isCurrentChunksOutdated">
    <p>Released {{ timeAgo }}</p>
  </div>
</SkewNotification>
```

### `**releaseDate**`

- Type: `**Date | null**`

The release date as a Date object.

```vue
<SkewNotification v-slot="{ isCurrentChunksOutdated, releaseDate }">
  <div v-if="isCurrentChunksOutdated">
    <p>Released: {{ releaseDate?.toLocaleString() }}</p>
  </div>
</SkewNotification>
```

### `**payload**`

- Type: `**ChunksOutdatedPayload | null**`

Payload from chunks outdated event with detailed information.

```vue
<SkewNotification v-slot="{ isCurrentChunksOutdated, payload }">
  <div v-if="isCurrentChunksOutdated">
    <p>Deleted chunks: {{ payload?.deletedChunks.length }}</p>
    <p>Invalidated modules: {{ payload?.invalidatedModules.length }}</p>
  </div>
</SkewNotification>
```

### `**isAppOutdated**`

- Type: `**boolean**`

Whether entire app is outdated (not just current chunks).

```vue
<SkewNotification v-slot="{ isAppOutdated }">
  <div v-if="isAppOutdated">
    <p>Full app update available</p>
  </div>
</SkewNotification>
```

## Props

The `**forceOpen**` prop (`**boolean**`, default `**undefined**`) forces the notification open for testing/debugging.

```vue
<script setup lang="ts">
const forceOpen = ref(true)
</script>

<template>
  <SkewNotification v-slot="{ reload }" :force-open="forceOpen">
    <div>
      <button @click="reload">
        Update
      </button>
    </div>
  </SkewNotification>
</template>
```

## Events

### `**@dismiss**`

Emitted when notification is dismissed.

```vue
<SkewNotification @dismiss="console.log('dismissed')">
  <!-- ... -->
</SkewNotification>
```

### `**@reload**`

Emitted when the component triggers a reload.

```vue
<SkewNotification @reload="console.log('reloading')">
  <!-- ... -->
</SkewNotification>
```

See [**~~UI Examples~~**](https://nuxtseo.com/docs/skew-protection/guides/ui-examples) for complete examples including Nuxt UI, toast notifications, banners, and more.

**Was this page helpful?**

### **Related **

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

[**Notification UI**](https://nuxtseo.com/docs/skew-protection/guides/ui-examples)

[**useSkewProtection()** Composable for accessing skew protection state and methods.](https://nuxtseo.com/docs/skew-protection/api/use-skew-protection) [**useActiveConnections()** Composable for monitoring real-time connection statistics and version distribution.](https://nuxtseo.com/docs/skew-protection/api/use-active-connections)