'skew:chunks-outdated'
Type: (payload: ChunksOutdatedPayload) => void | Promise<void>
Triggered when the client detects that the server has deleted chunks from their current version.
interface ChunksOutdatedPayload {
deletedChunks: string[]
invalidatedModules: string[]
passedReleases: string[]
}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 this tab's SSE or WebSocket connection.
With shared ownership, visible subscribed tabs receive version hints.
Only the owner receives connection identifiers, statistics, and other transport messages.
All tabs receive complete deployment updates through app:manifest:update and onAppOutdated().
For per-tab connection messages, set multiTab: false or enable connection tracking.
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 | {} |
skew:authorize-stats hook. See Live Connections for setup.Connection Config Hooks
Use these hooks to change settings before the connection opens.
'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
}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 }
})
})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 from VueUse.
import type { UseEventSourceOptions } from '@vueuse/core'
interface SkewSSEConfig {
url: string
options: UseEventSourceOptions<string>
}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>
}export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.hook('skew:adapter:config', (config) => {
// Override the channel name
config.channel = 'my-custom-channel'
})
})