Skew Protection

Pro

/

Getting Started

Install Nuxt Skew Protection

Last updated Dec 9, 2025 by

Harlan Wilton

in doc: clean up.

Copy for LLMs

Setup Module

Not sure what Skew Protection is? Check out the introduction.

Install the dependency and add it to your Nuxt config.

bash

npx nuxt module add skew-protection

bash

npm i nuxt-skew-protection

You will need to manually add the module to your Nuxt config.

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-skew-protection',
  ],
})

bash

yarn add nuxt-skew-protection

You will need to manually add the module to your Nuxt config.

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-skew-protection',
  ],
})

bash

pnpm i nuxt-skew-protection

You will need to manually add the module to your Nuxt config.

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-skew-protection',
  ],
})

bash

bun i nuxt-skew-protection

You will need to manually add the module to your Nuxt config.

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-skew-protection',
  ],
})

License

Nuxt AI Search requires a Nuxt SEO Pro license.

NUXT_SEO_PRO_KEY=your-license-key-here

Configure Module

Once installed the module will cache previous build assets and select an update detection strategy for your environment.

Follow these configuration steps:

1. Persistent Storage

Configure a persistant storage so that Nuxt build assets can have longer lifetime across deployments. The module will automatically prune old versions based on the retention settings.

If you're using GitHub Actions you can use this config:

your-github-workflow.yml

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # Install...
      - name: Cache for Nuxt SEO
        uses: actions/cache@v4
        with:
          path: node_modules/.cache/nuxt-seo
          key: deployment-${{ github.ref_name }}
      # Build, etc..

Alternative storage options include:

2. Understand How Updates Are Detected

The strategy used to detect new deployments can vary based on your hosting environment and performance needs. The module automatically selects the best strategy either: Polling, WebSockets or SSE.

If you're using NuxtHub or Cloudflare directly, check the Cloudflare guide for recommended settings. Otherwise, please check the update detection strategy documentation.

This site uses Cloudflare Durable Objects to check for updates via WebSockets.

3. Add UI Component

Users need to know when updates are available. Add notifications to prompt them.

You can use this minimal Nuxt UI example, add it to your app.vue or layout component.

app.vue

<template>
  <SkewNotification v-slot="{ isCurrentChunksOutdated, dismiss, reload }" force-open>
    <Transition
      enter-active-class="transition duration-300 ease-out"
      enter-from-class="opacity-0 translate-y-2"
      enter-to-class="opacity-100 translate-y-0"
      leave-active-class="transition duration-200 ease-in"
      leave-from-class="opacity-100 translate-y-0"
      leave-to-class="opacity-0 translate-y-2"
    >
      <div v-if="isCurrentChunksOutdated" class="fixed bottom-4 right-4 z-50">
        <div class="flex items-center gap-3 bg-white dark:bg-gray-900 rounded-full shadow-lg ring-1 ring-gray-200 dark:ring-gray-800 px-4 py-3">
          <span class="text-lg">✨</span>
          <div class="text-sm font-medium">
            Update available
          </div>
          <UButton color="primary" size="xs" label="Refresh" @click="reload" />
          <UButton color="gray" variant="ghost" size="xs" icon="i-heroicons-x-mark-20-solid" @click="dismiss" />
        </div>
      </div>
    </Transition>
  </SkewNotification>
</template>

This will only be shown when the user's loaded chunks are invalidated by a new deployment. For other examples see the UI Examples documentation.

Verifying Installation

You can verify the installation by checking your deployed Nuxt App Manifest file at /_nuxt/builds/latest.json, which should now include previous build manifests.

Perform a test deployment modifying your app.vue to trigger an update notification in your browser.