---
title: "<SkewNotification>"
description: "Headless component for displaying update notifications."
canonical_url: "https://nuxtseo.com/docs/skew-protection/api/skew-notification"
last_updated: "2026-05-06T16:56:19.597Z"
---

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

<note>

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

</note>

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

### `forceOpen`

- Type: `boolean`
- Default: `undefined`

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

## Examples

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