---
title: "Nuxt Hooks"
description: "Learn how to use Nuxt hooks to respond to skew protection events."
canonical_url: "https://nuxtseo.com/docs/skew-protection/api/nuxt-hooks"
last_updated: "2026-09-05T14:05:28.664Z"
---

## `'skew:chunks-outdated'`{lang="ts"}

**Type:** `(payload: ChunksOutdatedPayload) => void | Promise<void>`{lang="ts"}

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

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

```ts [nuxt.config.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'`{lang="ts"}

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

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.

```ts [plugins/skew-listener.client.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         | `{}`                          |

::note
The server only sends stats messages to connections that pass the `skew:authorize-stats` hook. See [Live Connections](/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'`{lang="ts"}

**Type:** `(config: SkewWebSocketConfig) => void | Promise<void>`{lang="ts"}

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

```ts [plugins/skew-config.client.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 }
  })
})
```

::note
**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).
::

```ts [plugins/enable-heartbeat.client.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'`{lang="ts"}

**Type:** `(config: SkewSSEConfig) => void | Promise<void>`{lang="ts"}

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

```ts [plugins/skew-config.client.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'`{lang="ts"}

**Type:** `(config: SkewAdapterConfig) => void | Promise<void>`{lang="ts"}

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

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

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