---
title: "Install Nuxt Skew Protection"
description: "Get started with Nuxt Skew Protection by installing the dependency to your project."
canonical_url: "https://nuxtseo.com/docs/skew-protection/getting-started/installation"
last_updated: "2026-05-11T10:47:59.713Z"
---

## Setup Module

Not sure what Skew Protection is? Check out the [introduction](/docs/skew-protection/getting-started/introduction).

Install the dependency and add it to your Nuxt config.

<module-install name="nuxt-skew-protection">



</module-install>

> <span>
> 
> !TIP
> 
> </span>
> 
> 
> Generate an Agent Skill for this package using [skilld](https://github.com/harlan-zw/skilld):
> 
> ```bash
> npx skilld add 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

Once installed the module will cache previous build assets and select an [update detection strategy](/docs/skew-protection/guides/update-strategies) for
your environment.

Follow these configuration steps:

### 1. Persistent Storage

Configure a [persistant storage](/docs/skew-protection/guides/storage-configuration) so that Nuxt build assets
can have longer lifetime across deployments. The module will automatically prune old versions based on 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 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](https://cloudflare.com) directly, check the [Cloudflare guide](/docs/skew-protection/providers/cloudflare) for recommended settings.
Otherwise, please check the [update detection strategy](/docs/skew-protection/guides/update-strategies) documentation.

<note>

This site uses [Cloudflare Durable Objects](/docs/skew-protection/guides/storage-configuration#github-actions) to check for updates via WebSockets.

</note>

### 3. Add UI Component

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

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

```vue [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](/docs/skew-protection/guides/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.

## Next Steps

You've successfully installed Nuxt Skew Protection and configured it for your project.

- Check your [Cookie Consent integration](/docs/skew-protection/guides/cookie-consent) if applicable.
- Add version checks to your [server routes](/docs/skew-protection/guides/immediate-updates#server-side-skew-detection).