Nitro Hooks · 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

-
-

Nitro API

# Nitro Hooks

[Copy for LLMs](https://nuxtseo.com/docs/skew-protection/nitro-api/nitro-hooks.md)

Nitro hooks allow you to build custom functionality on top of the SSE/WebSocket connections.

## [`'skew:connection:open'`](#skewconnectionopen)

**Type:** `(payload: { id: string, version: string, route?: string, ip?: string, send: (data) => void }) => void`

Triggered when a client establishes an SSE or [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) connection.

| Property | Description |
| --- | --- |
| `id` | Unique connection identifier |
| `version` | Client's build version (from cookie) |
| `route` | Initial route (requires `routeTracking: true`) |
| `ip` | Client IP address (requires `ipTracking: true`) |
| `send` | Function to send data to this specific client |

server/plugins/connections.ts

```
import { defineNitroPlugin } from 'nitropack/runtime'

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('skew:connection:open', ({ id, version, route, ip, send }) => {
    console.log(\`Client ${id} connected on version ${version} from ${ip}\`)

    // Send a custom message to this client
    send({ type: 'welcome', message: 'Hello!' })
  })
})
```

## [`'skew:connection:close'`](#skewconnectionclose)

**Type:** `(payload: { id: string }) => void`

Triggered when a client disconnects from the SSE or WebSocket connection.

server/plugins/connections.ts

```
import { defineNitroPlugin } from 'nitropack/runtime'

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('skew:connection:close', ({ id }) => {
    console.log(\`Client ${id} disconnected\`)
  })
})
```

## [`'skew:connection:route-update'`](#skewconnectionroute-update)

**Type:** `(payload: { id: string, route: string }) => void`

Triggered when a client navigates to a different route. Requires `routeTracking: true`.

server/plugins/connections.ts

```
import { defineNitroPlugin } from 'nitropack/runtime'

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('skew:connection:route-update', ({ id, route }) => {
    console.log(\`Client ${id} navigated to ${route}\`)
  })
})
```

## [`'skew:authorize-stats'`](#skewauthorize-stats)

**Type:** `(payload: { event?: H3Event | { headers?: Headers }, authorize: () => void }) => void`

Called when a client requests stats subscription. Call `authorize()` to allow the connection to receive stats updates.

For SSE, `event` is a full `H3Event` with cookies and session access. For WebSocket, `event` is `{ headers }` since WebSocket handlers don't expose H3Event. Both work with `getUserSession()` from nuxt-auth-utils.

server/plugins/skew-auth.ts

```
import { defineNitroPlugin } from 'nitropack/runtime'

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('skew:authorize-stats', async ({ event, authorize }) => {
    // With nuxt-auth-utils
    const session = await getUserSession(event)
    if (session.user?.role === 'admin') {
      authorize()
    }
  })
})
```

## [`'skew:subscribe-stats'`](#skewsubscribe-stats)

**Type:** `(payload: { id: string, event?: H3Event | { headers?: Headers } }) => void`

Triggered when a client requests stats subscription. The built-in handler calls `skew:authorize-stats` and manages subscriptions. You typically don't need to hook into this directly.

## [`'skew:stats'`](#skewstats)

**Type:** `(callback: (stats: { total: number, versions: Record<string, number>, routes: Record<string, number> }) => void) => void`

Retrieve current connection stats on-demand. Useful for API endpoints.

server/api/admin/stats.get.ts

```
export default defineEventHandler(async (event) => {
  return new Promise((resolve) => {
    const nitroApp = useNitroApp()
    nitroApp.hooks.callHook('skew:stats', (stats) => {
      resolve(stats)
    })
  })
})
```

## [Recipes](#recipes)

### [Custom Connection Tracking](#custom-connection-tracking)

Build your own connection tracking without using the built-in `connectionTracking` option:

server/plugins/custom-tracking.ts

```
import { defineNitroPlugin } from 'nitropack/runtime'

const connections = new Map<string, { version: string, ip?: string, connectedAt: Date }>()

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('skew:connection:open', ({ id, version, ip }) => {
    connections.set(id, { version, ip, connectedAt: new Date() })
  })

  nitroApp.hooks.hook('skew:connection:close', ({ id }) => {
    connections.delete(id)
  })
})
```

### [Broadcast to All Clients](#broadcast-to-all-clients)

Send messages to all connected clients:

server/plugins/broadcast.ts

```
import { defineNitroPlugin } from 'nitropack/runtime'

type SendFn = (data: any) => void
const clients = new Map<string, SendFn>()

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('skew:connection:open', ({ id, send }) => {
    clients.set(id, send)
  })

  nitroApp.hooks.hook('skew:connection:close', ({ id }) => {
    clients.delete(id)
  })

  // Expose broadcast function globally
  globalThis.broadcastToClients = (data: any) => {
    for (const send of clients.values()) {
      send(data)
    }
  }
})
```

[Edit this page](https://github.com/nuxt-seo-pro/nuxt-skew-protection/edit/main/docs/content/3.nitro-api/nitro-hooks.md)

[Markdown For LLMs](https://nuxtseo.com/docs/skew-protection/nitro-api/nitro-hooks.md)

Did this page help you?

On this page

- ['skew:connection:open'](#skewconnectionopen)
- ['skew:connection:close'](#skewconnectionclose)
- ['skew:connection:route-update'](#skewconnectionroute-update)
- ['skew:authorize-stats'](#skewauthorize-stats)
- ['skew:subscribe-stats'](#skewsubscribe-stats)
- ['skew:stats'](#skewstats)
- [Recipes](#recipes)

[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)