---
title: "Install Nuxt Skew Protection"
description: "Install Nuxt Skew Protection and configure storage, update detection, and notifications."
canonical_url: "https://nuxtseo.com/docs/skew-protection/getting-started/installation"
last_updated: "2026-10-08T08:59:18.155Z"
---

## Setup Module

For an overview, read the [introduction](/docs/skew-protection/getting-started/introduction).

Install the dependency and add it to your Nuxt config.

::module-install{name="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`.

::tip
Using an AI agent? Get the nuxt-skew-protection Skill on [skilld.dev/gh/harlan-zw/nuxt-skew-protection](https://skilld.dev/gh/harlan-zw/nuxt-skew-protection).
::

Nuxt Robots is optional. Install [@nuxtjs/robots](/docs/robots/getting-started/introduction) v7 to exclude bots from [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/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.

```bash
npx nuxi module add @nuxtjs/robots
```

## Configure Module

The module caches previous build assets and selects an [update detection strategy](/docs/skew-protection/guides/update-strategies) for your environment.

### 1. Persistent Storage

Configure [persistent storage](/docs/skew-protection/guides/storage-configuration) to keep Nuxt build assets available across deployments. The module removes old versions using the [retention settings](/docs/skew-protection/guides/storage-configuration#retention-periods).

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

```yaml [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:

- [Redis Storage](/docs/skew-protection/guides/storage-configuration#redis)
- [Cloudflare KV](/docs/skew-protection/providers/cloudflare)
- [CDN Usage](/docs/skew-protection/guides/storage-configuration#cdn-usage)

### 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](https://cloudflare.com) directly, check the [Cloudflare guide](/docs/skew-protection/providers/cloudflare) for recommended settings.
For other platforms, read the [update detection strategy](/docs/skew-protection/guides/update-strategies) documentation.

::note
This site uses [Cloudflare Durable Objects](/docs/skew-protection/providers/cloudflare#cloudflare-durable-objects) to check for updates via WebSockets.
::

### 3. Add UI Component

Users need to know when updates are available. [Add notifications](/docs/skew-protection/guides/immediate-updates) to prompt them.

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

```vue [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="gray" variant="ghost" size="xs" icon="i-heroicons-x-mark-20-solid" @click="dismiss" />
        </div>
      </div>
    </Transition>
  </SkewNotification>
</template>
```

This notification appears when a deployment invalidates the user's loaded chunks. For more templates, see the [UI Examples](/docs/skew-protection/guides/ui-examples) documentation.

## Verifying Installation

Check your deployed Nuxt App Manifest at `/_nuxt/builds/latest.json`. It should include previous build manifests.

Keep your app open in a browser, change `app.vue`, then deploy. Check that the browser shows an update notification.

## Next Steps

1. **[Cookie Consent](/docs/skew-protection/guides/cookie-consent)**: Check your cookie consent integration if applicable
2. **[Server-Side Skew Detection](/docs/skew-protection/guides/immediate-updates#server-side-skew-detection)**: Add version checks to your server routes

## Sitemap

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