---
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-05-06T16:56:10.044Z"
---

## `'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[]
}
```

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

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

<table>
<thead>
  <tr>
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Payload
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        connected
      </code>
    </td>
    
    <td>
      Initial connection acknowledgment
    </td>
    
    <td>
      <code>
        { version, timestamp }
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        keepalive
      </code>
    </td>
    
    <td>
      Periodic heartbeat
    </td>
    
    <td>
      <code>
        { timestamp }
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stats
      </code>
    </td>
    
    <td>
      Connection statistics (requires authorization)
    </td>
    
    <td>
      <code>
        { total, versions, routes }
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stats-unauthorized
      </code>
    </td>
    
    <td>
      Sent when stats subscription is denied
    </td>
    
    <td>
      <code>
        {}
      </code>
    </td>
  </tr>
</tbody>
</table>

<callout type="info">

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.

</callout>

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

```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 type="info">

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

</note>

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

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

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

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

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