---
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-09-30T04:31:14.388Z"
---

## 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"}
::

::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).
::

**Required: Nuxt Robots.** This module requires [@nuxtjs/robots](/docs/robots/getting-started/introduction) (v5.6.7+) to detect bots and prevent unnecessary WebSocket/SSE connections from crawlers.

```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 selects polling, WebSockets, or SSE based on your hosting environment.

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.