Install Nuxt Skew Protection

Last updated Oct 12, 2026Harlan Wilton

Setup Module

For an overview, read the introduction.

Install the dependency and add it to your Nuxt config.

@nuxtjs/seo includes nuxt-skew-protection. If you use @nuxtjs/seo, skip this step unless you want to manage this module separately.

npx nuxt module add nuxt-skew-protection

npm i nuxt-skew-protection

yarn add nuxt-skew-protection

pnpm i nuxt-skew-protection

bun i nuxt-skew-protection

Use Nuxt 4.6 or Nuxt 5. Use Node 22.22.3+, Node 24.15.0+, or Node 26+.

Import app functions from #skew-protection/app. Import server functions from #skew-protection/server.

Using an AI agent? Get the nuxt-skew-protection Skill on skilld.dev/gh/harlan-zw/nuxt-skew-protection.

Nuxt Robots is optional. Install @nuxtjs/robots v7 to exclude bots from WebSocket and SSE connections. Without Nuxt Robots, Skew Protection still serves assets and checks versions. Connections do not filter bot traffic.

Site Config is optional. When installed, debug output uses its configured URL. Otherwise, debug output uses the request origin.

npx nuxt module add @nuxtjs/robots

Configure Module

The module caches previous build assets and selects an update detection strategy for your environment.

1. Persistent Storage

Configure persistent storage to keep Nuxt build assets available across deployments. The module removes old versions using 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 the Module Detects Updates

The module uses Nuxt's native polling by default, checking once per hour. For immediate updates, opt into SSE, WebSockets, or an external adapter.

If you're using NuxtHub or Cloudflare directly, check the Cloudflare guide for recommended settings. For other platforms, read 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.

Add this Nuxt UI example to your app.vue or layout component.

app.vue

<template>
  <SkewNotification v-slot="{ isCurrentChunksOutdated, dismiss, reload }">
    <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="neutral" variant="ghost" size="xs" icon="i-heroicons-x-mark-20-solid" @click="dismiss" />
        </div>
      </div>
    </Transition>
  </SkewNotification>
</template>