Introduction

Why Nuxt Skew Protection?

Version 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 a new deployment is detected) helps, but in many cases it's not enough.

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

Ready to get started? Check out the installation guide.

Nuxt Chunk Loading Errors

If you've come across any of the following errors in Google Search Console, Sentry, or the browser console, they may be related to chunk loading failures, which the module prevents:

"Cannot read properties of undefined (reading 'default')"

"Couldn't resolve component 'default' at /"

"undefined is not an object (evaluating 'r.default')"

"Failed to fetch dynamically imported module"

"Importing a module script failed"

Features

🕷️ Persistent Build Assets

Previous build artifacts remain accessible across deploys, avoiding broken requests from:

• Search engine crawlers hitting stale chunk URLs
• Users on old sessions navigating your app
• Progressive web apps with cached routes

Assets are stored with smart deduplication to minimize storage overhead.

⚡ Instant Update Prompts

Zero-config real-time notifications when a new version is deployed. Three transport strategies available:

• Polling - Works everywhere, uses Nuxt's built-in app:manifest:update hook
• SSE - Server-Sent Events for Node.js/Bun/Deno runtimes
• WebSocket - Real-time updates via Cloudflare Durable Objects

🎯 Chunk-Aware Targeting

Not every deploy needs to interrupt users. Notifications fire only when the user's currently loaded chunks are invalidated by the new build.

A service worker tracks loaded JavaScript modules and detects when they're deleted in subsequent deployments - no false positives for unrelated updates.

🎨 Headless UI

Drop-in <SkewNotification> component with first-class Nuxt UI support:

<template>
  <SkewNotification v-slot="{ isCurrentChunksOutdated }">
    <div v-if="isCurrentChunksOutdated">
      New version available
    </div>
  </SkewNotification>
</template>