NuxtSEO Pro
Nuxt API

Nuxt Hooks

Last updated by Harlan Wilton in feat: `useSkewProtection()` lazy mode.

'skew-protection:chunks-outdated'

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

Triggered when the client detects that chunks from their current version have been deleted on the server.

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

export default defineNuxtConfig({
  hooks: {
    'skew-protection: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 connection. Useful for building custom functionality on top of the real-time connection.

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

TypeDescriptionPayload
connectedInitial connection acknowledgment{ version, timestamp }
keepalivePeriodic heartbeat{ timestamp }
statsConnection statistics (requires connectionTracking: true){ total, versions }

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 from VueUse.

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

interface SkewWebSocketConfig {
  url: string
  options: UseWebSocketOptions
}
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 }

    // Customize heartbeat
    config.options.heartbeat = { interval: 60000, pongTimeout: 5000 }
  })
})

'skew:sse:config'

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

Customize Server-Sent Events connection settings. The options type extends UseEventSourceOptions from VueUse.

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

interface SkewSSEConfig {
  url: string
  options: UseEventSourceOptions<string>
}
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, Upstash).

interface SkewAdapterConfig {
  channel: string
  adapterConfig: Record<string, unknown>
}
plugins/skew-config.client.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('skew:adapter:config', (config) => {
    // Override the channel name
    config.channel = 'my-custom-channel'
  })
})
Edit this page
Markdown For LLMs
Did this page help you?

View Active Connections

Monitor active connections and version distribution in real-time.

useSkewProtection()

Composable for accessing skew protection state and methods.