Install Nuxt Skew Protection · Nuxt Skew Protection · Nuxt SEO

[NuxtSEO Pro](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

[Sign In](https://nuxtseo.com/auth/github)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

[User Guides](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)

[API](https://nuxtseo.com/docs/skew-protection/api/use-skew-protection)

[Releases](https://nuxtseo.com/docs/skew-protection/releases/v1)

Skew Protection

- [Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

Search…```k`` /`

v1.1.1

- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

- [Introduction](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [Installation](https://nuxtseo.com/docs/skew-protection/getting-started/installation)

### Core Concepts

- [Check for Update Strategy](https://nuxtseo.com/docs/skew-protection/guides/update-strategies)
- [Update Notifications](https://nuxtseo.com/docs/skew-protection/guides/immediate-updates)
- [Performance](https://nuxtseo.com/docs/skew-protection/guides/performance)
- [Persistent Storage](https://nuxtseo.com/docs/skew-protection/guides/storage-configuration)
- [Notification UI](https://nuxtseo.com/docs/skew-protection/guides/ui-examples)
- [Cookie Consent](https://nuxtseo.com/docs/skew-protection/guides/cookie-consent)
- [View Active Connections](https://nuxtseo.com/docs/skew-protection/guides/live-connections)
- [Tracking User Pages](https://nuxtseo.com/docs/skew-protection/guides/route-tracking)

### Providers

- [External Providers](https://nuxtseo.com/docs/skew-protection/providers/external)
- [Cloudflare](https://nuxtseo.com/docs/skew-protection/providers/cloudflare)

Getting Started

# Install Nuxt Skew Protection

[Copy for LLMs](https://nuxtseo.com/docs/skew-protection/getting-started/installation.md)

## [Setup Module](#setup-module)

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

Install the dependency and add it to your Nuxt config.

nuxt

npm

yarn

pnpm

bun

bash

`npx nuxt module add nuxt-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',
  ],
})
```

> !TIP Generate an Agent Skill for this package using [skilld](https://github.com/harlan-zw/skilld):```
npx skilld add nuxt-skew-protection
```
### [Required: Nuxt Robots](#required-nuxt-robots)

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

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

## [Configure Module](#configure-module)

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

Follow these configuration steps:

### [1. Persistent Storage](#_1-persistent-storage)

Configure a [persistant storage](https://nuxtseo.com/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](https://nuxtseo.com/docs/skew-protection/guides/storage-configuration#retention-periods).

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:

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

### [2. Understand How the Module Detects Updates](#_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](https://nuxtseo.com/docs/skew-protection/providers/cloudflare) for recommended settings. Otherwise, please check the [update detection strategy](https://nuxtseo.com/docs/skew-protection/guides/update-strategies) documentation.

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

### [3. Add UI Component](#_3-add-ui-component)

Users need to know when updates are available. [Add notifications](https://nuxtseo.com/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.

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](https://nuxtseo.com/docs/skew-protection/guides/ui-examples) documentation.

## [Verifying Installation](#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](#next-steps)

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

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

[Edit this page](https://github.com/nuxt-seo-pro/nuxt-skew-protection/edit/main/docs/content/1.getting-started/1.installation.md)

[Markdown For LLMs](https://nuxtseo.com/docs/skew-protection/getting-started/installation.md)

Did this page help you?

[Introduction Eliminate version skew issues in your Nuxt application with intelligent update notifications and long-lived build assets.](https://nuxtseo.com/docs/skew-protection/getting-started/introduction) [Check for Update Strategy Choose the best update detection strategy for your platform.](https://nuxtseo.com/docs/skew-protection/guides/update-strategies)

On this page

- [Setup Module](#setup-module)
- [Configure Module](#configure-module)
- [Verifying Installation](#verifying-installation)
- [Next Steps](#next-steps)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

- [Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

### [NuxtSEO Pro](https://nuxtseo.com/pro "Home")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/docs/nuxt-seo-pro/mcp/installation)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Research Pro](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer Pro](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings Pro](https://nuxtseo.com/tools/domain-rankings)

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)