Nuxt Skew Protection

Solve Nuxt version skew with persistent assets and instant updates.

Why Nuxt Skew Protection?

undefinedVersion skew is a mismatch between your deployed build and the chunks running in user browsers and crawler sessions. It can lead to several issues:

• 🕷️ Crawlers 404 on stale chunks - Googlebot requests _nuxt/builds/abc123.js which no longer exists post-deploy, logging 500s and potentially impacting indexing
• 💥 ChunkLoadError in production - Users mid-session get Failed to fetch dynamically imported module when navigating to routes with invalidated chunks
• 🔄 Delayed rollout - Your latest release sits unloaded until users hard refresh, sometimes hours or days later

Nuxt’s built-in behavior (hard-reload when it detects a new deployment) helps, but in many cases it’s not enough.

Nuxt Skew Protection solves this with proactive update prompts and persistent build assets across deploys.

Features

• 🕷️ Persistent Build Assets - Previous build artifacts remain accessible, so crawlers and stale sessions never hit dead ends.
• ⚡ Instant Update Prompts - Zero-config real-time notifications on deploy. Users adopt your latest build immediately.
• 🎯 Chunk-Aware Targeting - Notifications fire only when the user’s loaded chunks are invalidated. No noise for unrelated updates.
• 🎨 Headless UI - Drop-in notification component with first-class Nuxt UI support.
• 📊 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

Install nuxt-skew-protection dependency to your project:

npx nuxi@latest module add nuxt-skew-protection

[!TIP]
Generate an Agent Skill for this package using skilld:

npx skilld add nuxt-skew-protection

Documentation

📖 Read the full documentation for more information.

Sponsors

License

MIT License