nuxt-skew-protection

Solve version skew with persistent assets and instant updates.

Nuxt Skew Protection

Keep old build assets available and notify users when their app needs an update.

Version skew happens when a browser or crawler still uses chunks from an older deployment. You may see:

🕷️ Crawlers 404 on stale chunks: Googlebot requests a chunk that no longer exists after deployment.
💥 ChunkLoadError in production: Users see Failed to fetch dynamically imported module when a route needs a deleted chunk.
🔄 Delayed rollout: Users keep running an old version until they refresh.

Nuxt can reload the page after detecting a new deployment. It still has limits.

Nuxt Skew Protection keeps previous build assets available across deployments and provides update notification logic.

🕷️ Persistent Build Assets: Keep previous build assets available for crawlers and users on old versions.
⚡ Instant Update Prompts: Detect deployments through polling, SSE, WebSockets, or an external provider.
🎯 Chunk-Aware Targeting: Prompt users when a deployment invalidates their loaded chunks.
🎨 Headless UI: Use the headless notification component with your own template or a Nuxt UI example.
📊 Live Connection Monitoring: Track active users and version distribution in real-time for admin dashboards and rollout progress.
🔌 Third-Party Adapters: Real-time updates on any platform (including static sites) via Pusher or Ably.

Add nuxt-skew-protection to your project:

npx nuxt module add nuxt-skew-protection

Using an AI agent? Get the nuxt-skew-protection Skill on skilld.dev/gh/harlan-zw/nuxt-skew-protection.