External providers (adapters) allow you to use third-party WebSocket services for real-time update notifications. This enables instant updates on any platform, including static/prerendered sites.
| Adapter | Service | Free Tier |
|---|---|---|
| Pusher | pusher.com | 200k messages/day |
| Ably | ably.com | 6M messages/month |
Pusher Channels is a hosted WebSocket service.
npx nypm add pusher-js
import { pusherAdapter } from 'nuxt-skew-protection/adapters/pusher'
export default defineNuxtConfig({
skewProtection: {
updateStrategy: pusherAdapter({
// Required
key: process.env.PUSHER_KEY,
cluster: process.env.PUSHER_CLUSTER,
appId: process.env.PUSHER_APP_ID,
secret: process.env.PUSHER_SECRET,
// Optional
channel: 'skew-protection', // default
event: 'VersionUpdated', // default
})
}
})
Ably is a realtime messaging platform.
npx nypm add ably
import { ablyAdapter } from 'nuxt-skew-protection/adapters/ably'
export default defineNuxtConfig({
skewProtection: {
updateStrategy: ablyAdapter({
// Required
key: process.env.ABLY_KEY,
// Optional
channel: 'skew-protection', // default
event: 'VersionUpdated', // default
})
}
})
Create your own adapter by implementing the SkewAdapter interface:
import type { SkewAdapter } from 'nuxt-skew-protection/adapters'
import { z } from 'zod'
const schema = z.object({
apiKey: z.string(),
})
export function myAdapter(config: z.infer<typeof schema>): SkewAdapter {
return {
name: 'my-adapter',
config,
schema,
subscribe: (onMessage) => {
// Connect to your WebSocket service
// Call onMessage({ version }) when update received
return () => { /* cleanup */ }
},
broadcast: async (version) => {
// Broadcast version to all connected clients
},
}
}