---
title: "Nuxt Skew Protection"
description: "Keep previous build assets available and notify users when their loaded chunks become outdated."
canonical_url: "https://nuxtseo.com/docs/skew-protection/getting-started/introduction"
last_updated: "2026-09-18T04:38:01.922Z"
---

## Why use Nuxt Skew Protection?

::skew-protection-demo-auto
::

**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](https://github.com/nuxt/nuxt/issues/29624).

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

Start with the [installation guide](/docs/skew-protection/getting-started/installation).

**Nuxt chunk loading errors.** These errors can indicate missing chunks in Google Search Console, [Sentry](https://sentry.io), 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>`{lang="html"}:

```vue
<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](/docs/skew-protection/guides/live-connections) for setup.

### 🔌 Third-Party Adapters

Get real-time update notifications on **any platform** including static sites using external [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) providers:

- [Pusher](https://pusher.com): Hosted WebSocket service
- [Ably](https://ably.com): Realtime messaging platform

See [External Providers](/docs/skew-protection/providers/external) for setup guides.

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.