nuxt-skew-protection

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

Why Nuxt Skew Protection?

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.

Features

• 🕷️ 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.

Installation

Add nuxt-skew-protection to your project:

npx nuxt module add nuxt-skew-protection

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

Documentation

📖 Read the documentation.

Sponsors

License

MIT License