Nuxt Skew Protection

Why use 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.

Start with the installation guide.

Nuxt chunk loading errors. These errors can indicate missing chunks in Google Search Console, Sentry, or your browser console:

"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

The module stores one copy of each shared asset to reduce storage use.

Instant Update Prompts

The module detects deployments through one of these strategies. Add a notification template to show updates to users:

• 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
• Adapters: Third-party providers for any platform (see below)

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 checks whether later deployments delete them.

Headless UI

Add your own template inside <SkewNotification>:

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

Live Connection Monitoring

Track active connections and see which build versions users run. See View Active Connections for setup.

Third-Party Adapters

Get real-time update notifications on any platform including static sites using external WebSocket providers:

• Pusher: Hosted WebSocket service
• Ably: Realtime messaging platform

See External Providers for setup guides.