Getting Started

Nuxt Skew Protection

Copy for LLMs
Last updated by
Harlan Wilton
 in doc: early access.

Why Nuxt Skew Protection?

Congrats on shipping that latest release! Unfortunately, many of your users are going to be using the previous version of your app for hours to days afterwards until they refresh.

Finally fixed that critical bug? Great, but users with the old version will keep experiencing issues until they reload. Crawlers will often hit your site and request build chunks that no longer exist, leading to 500 errors and broken indexes.

You've just been "skewed"! Skew is the version difference between what your users are running and what is currently deployed.

While Nuxt helps by hard-reloading on navigation when it detects a new release, it's often not enough to ensure a smooth experience for all users and crawlers. Just check out one of Nuxt's top commented issues.

Nuxt Skew Protection solves these problems by:

  1. Notifying users intelligently when their loaded code becomes outdated
  2. Keeping old build assets accessible so crawlers and old sessions don't break
  3. Providing real-time update detection using polling, SSE, or WebSockets

Ready to get started? Check out the installation guide.

Early Access (v0.x): This module is currently MIT licensed for all projects. Once stable (v1+), it will be part of Nuxt SEO Pro and require a commercial license. You can always use v0.x versions without a license.

Features

⚡ Real-time Update Notifications

Zero-config notifications when a new version is deployed. Choose from three strategies:

  • Polling - Works everywhere, uses Nuxt's built-in mechanism
  • SSE - Real-time Server-Sent Events for Node.js/Bun/Deno
  • WebSocket - Real-time updates for Cloudflare Durable Objects

🎯 Intelligent User Notifications

Avoid spamming users with update notifications. Only notify when their currently loaded modules become invalidated by the new deployment.

Uses a service worker to track loaded JavaScript modules and intelligently detect when they're deleted in new builds.

📦 Long-lived Build Assets

Previous build assets remain accessible to avoid breaking:

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

Assets are stored with smart deduplication to minimize storage costs.

🎨 Headless UI Component

Ship it quicker with a headless <SkewNotification> component that works perfectly with any UI framework:

<template>
  <SkewNotification v-slot="{ isCurrentChunksOutdated }">
    <div v-if="isCurrentChunksOutdated">
      New Update!
    </div>
  </SkewNotification>
</template>
Edit this page
Markdown For LLMs
Did this page help you?

Installation

Get started with Nuxt Skew Protection by installing the dependency to your project.