· Nuxt Skew Protection · Nuxt SEO - - - - [Sign In](https://nuxtseo.com/auth/github) [Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo) Skew Protection - - - - - - - - - - Search…```k`` /` v1.1.1 - [Discord Support](https://discord.com/invite/275MBUBvgP) ### Nuxt API - - - - - ### Nitro API - - Nuxt API # [Copy for LLMs](https://nuxtseo.com/docs/skew-protection/api/skew-notification.md) 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](#basic-usage) ``` ``` ## [Slot Props](#slot-props) The component gives you these props via scoped slot: ### [`version`](#version) - Type: `string` The user's current version (from cookie or buildId). ```

Current version: {{ version }}

``` ### [`isCurrentChunksOutdated`](#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 ```

Update available!

``` ### [`dismiss()`](#dismiss) - Type: `() => void` Dismiss the notification (sets `isCurrentChunksOutdated` to `false`). ```

Update available!

``` ### [`reload()`](#reload) - Type: `() => void` Reload the page to get the new version. Calls `window.location.reload()`. ```

``` ### [`timeAgo`](#timeago) - Type: `string` Human-readable time since the release. Examples: "just now", "2 minutes ago", "1 hour ago" ```

Released {{ timeAgo }}

``` ### [`releaseDate`](#releasedate) - Type: `Date | null` The release date as a Date object. ```

Released: {{ releaseDate?.toLocaleString() }}

``` ### [`payload`](#payload) - Type: `ChunksOutdatedPayload | null` Payload from chunks outdated event with detailed information. ```

Deleted chunks: {{ payload?.deletedChunks.length }}

Invalidated modules: {{ payload?.invalidatedModules.length }}

``` ### [`isAppOutdated`](#isappoutdated) - Type: `boolean` Whether entire app is outdated (not just current chunks). ```

Full app update available

``` ## [Props](#props) ### [`forceOpen`](#forceopen) - Type: `boolean` - Default: `undefined` Force notification open for testing/debugging. ``` ``` ## [Events](#events) ### [`@dismiss`](#dismiss-1) Emitted when notification is dismissed. ``` ``` ### [`@reload`](#reload-1) Emitted when the component triggers a reload. ``` ``` ## [Examples](#examples) See for complete examples including Nuxt UI, toast notifications, banners, and more. [Edit this page](https://github.com/nuxt-seo-pro/nuxt-skew-protection/edit/main/docs/content/3.api/2.skew-notification.md) [Markdown For LLMs](https://nuxtseo.com/docs/skew-protection/api/skew-notification.md) Did this page help you? On this page - [Basic Usage](#basic-usage) - [Slot Props](#slot-props) - [Props](#props) - [Events](#events) - [Examples](#examples) [GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP) ### - - Modules - - - - - - - - - ### - - - ### Nuxt - - - - - Vue - - - - - - - - ### - - - - - - - - - - Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)