---
title: "Nuxt Hooks · Nuxt Skew Protection · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/skew-protection/api/nuxt-hooks"
last_updated: "2026-08-16T10:10:41.658Z"
meta:
  description: "Learn how to use Nuxt hooks to respond to skew protection events."
  "og:description": "Learn how to use Nuxt hooks to respond to skew protection events."
  "og:title": "Nuxt Hooks · 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**

# **Nuxt Hooks**

## `**'skew:chunks-outdated'**`

**Type:** `**(payload: ChunksOutdatedPayload) => void | Promise<void>**`

Triggered when the client detects that the server has deleted chunks from their current version.

```ts
interface ChunksOutdatedPayload {
  deletedChunks: string[]
  invalidatedModules: string[]
  passedReleases: string[]
}
```

nuxt.config.ts

```ts
export default defineNuxtConfig({
  hooks: {
    'skew:chunks-outdated': (payload) => {
      console.log('Outdated chunks:', payload.deletedChunks)
      console.log('Releases since client version:', payload.passedReleases)
    },
  },
})
```

## `**'skew:message'**`

**Type:** `**(message: { type: string, [key: string]: unknown }) => void | Promise<void>**`

Triggered for every message received from the SSE or [**~~WebSocket~~**](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) connection. Useful for building custom functionality on top of the real-time connection.

plugins/skew-listener.client.ts

```ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hooks.hook('skew:message', (message) => {
    if (message.type === 'stats') {
      console.log('Active connections:', message.total)
      console.log('Version distribution:', message.versions)
    }

    if (message.type === 'connected') {
      console.log('Connected to server version:', message.version)
    }
  })
})
```

**Message types:**

| **Type** | **Description** | **Payload** |
| --- | --- | --- |
| `**connected**` | Initial connection acknowledgment | `**{ version, timestamp }**` |
| `**keepalive**` | Periodic heartbeat | `**{ timestamp }**` |
| `**stats**` | Connection statistics (requires authorization) | `**{ total, versions, routes }**` |
| `**stats-unauthorized**` | Sent when stats subscription is denied | `**{}**` |

The server only sends stats messages to connections that pass the `**skew:authorize-stats**` hook. See [**~~Live Connections~~**](https://nuxtseo.com/docs/skew-protection/guides/live-connections#authorization) for setup.

## Connection Config Hooks

These hooks allow you to customize the connection configuration before the connection is established.

### `**'skew:ws:config'**`

**Type:** `**(config: SkewWebSocketConfig) => void | Promise<void>**`

Customize WebSocket connection settings. The `**options**` type extends [`**UseWebSocketOptions**`](https://vueuse.org/core/useWebSocket/) from [**~~VueUse~~**](https://vueuse.org).

```ts
import type { UseWebSocketOptions } from '@vueuse/core'

interface SkewWebSocketConfig {
  url: string
  options: UseWebSocketOptions
}
```

plugins/skew-config.client.ts

```ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('skew:ws:config', (config) => {
    // Custom WebSocket URL
    config.url = 'wss://custom-endpoint.example.com/ws'

    // Adjust reconnection behavior
    config.options.autoReconnect = { retries: 5, delay: 10000 }
  })
})
```

**The module disables heartbeat by default** to reduce server load and allow Cloudflare Durable Objects to hibernate. Enable it only if your infrastructure has aggressive idle timeouts (some proxies close connections after 60s of inactivity).

plugins/enable-heartbeat.client.ts

```ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('skew:ws:config', (config) => {
    // Enable heartbeat for infrastructure with aggressive idle timeouts
    config.options.heartbeat = {
      message: JSON.stringify({ type: 'ping', timestamp: Date.now() }),
      interval: 30000, // ping every 30s
      pongTimeout: 10000 // expect pong within 10s
    }
  })
})
```

### `**'skew:sse:config'**`

**Type:** `**(config: SkewSSEConfig) => void | Promise<void>**`

Customize Server-Sent Events connection settings. The `**options**` type extends [`**UseEventSourceOptions**`](https://vueuse.org/core/useEventSource/) from VueUse.

```ts
import type { UseEventSourceOptions } from '@vueuse/core'

interface SkewSSEConfig {
  url: string
  options: UseEventSourceOptions<string>
}
```

plugins/skew-config.client.ts

```ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('skew:sse:config', (config) => {
    // Custom SSE URL
    config.url = '/_custom/sse-endpoint'

    // Adjust reconnection behavior
    config.options.autoReconnect = { retries: 3, delay: 5000 }
  })
})
```

### `**'skew:adapter:config'**`

**Type:** `**(config: SkewAdapterConfig) => void | Promise<void>**`

Customize adapter-based connection settings (e.g., [**~~Redis~~**](https://redis.io), Upstash).

```ts
interface SkewAdapterConfig {
  channel: string
  adapterConfig: Record<string, unknown>
}
```

plugins/skew-config.client.ts

```ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('skew:adapter:config', (config) => {
    // Override the channel name
    config.channel = 'my-custom-channel'
  })
})
```

**Was this page helpful?**

### **Related **

[**Nitro Hooks**](https://nuxtseo.com/docs/skew-protection/nitro-api/nitro-hooks)

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

[**useActiveConnections()** Composable for monitoring real-time connection statistics and version distribution.](https://nuxtseo.com/docs/skew-protection/api/use-active-connections) [**Configuration** Complete configuration reference for Nuxt Skew Protection.](https://nuxtseo.com/docs/skew-protection/api/config)