useSkewProtection() · 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)
### Nuxt API
- [`useSkewProtection()`](https://nuxtseo.com/docs/skew-protection/api/use-skew-protection)
- [`useActiveConnections()`](https://nuxtseo.com/docs/skew-protection/api/use-active-connections)
- [``](https://nuxtseo.com/docs/skew-protection/api/skew-notification)
- [nuxt.config.ts](https://nuxtseo.com/docs/skew-protection/api/config)
- [Nuxt Hooks](https://nuxtseo.com/docs/skew-protection/api/nuxt-hooks)
### Nitro API
- [`isClientOutdated()`](https://nuxtseo.com/docs/skew-protection/nitro-api/is-client-outdated)
- [Nitro Hooks](https://nuxtseo.com/docs/skew-protection/nitro-api/nitro-hooks)
Nuxt API
# useSkewProtection()
[Copy for LLMs](https://nuxtseo.com/docs/skew-protection/api/use-skew-protection.md)
The main composable for interacting with Nuxt Skew Protection.
## [Usage](#usage)
```
const skew = useSkewProtection()
```
## [Options](#options)
### [`lazy`](#lazy)
- Type: `boolean`
- Default: `false`
When `false` (default), the composable establishes the connection automatically when called in a mounted component. When `true`, you must call `connect()` manually.
```
// Auto-connect on mount (default)
const skew = useSkewProtection()
// Manual connection control
const skew = useSkewProtection({ lazy: true })
skew.connect() // Connect when ready
```
## [Returns](#returns)
### [`manifest`](#manifest)
- Type: `Ref`
The current build manifest from `builds/latest.json`.
```
const { manifest } = useSkewProtection()
console.log(manifest.value?.id) // Current buildId
console.log(manifest.value?.timestamp) // Build timestamp
```
### [`clientVersion`](#clientversion)
- Type: `string`
The user's current version (from cookie or buildId).
```
const { clientVersion } = useSkewProtection()
console.log(clientVersion) // "abc123"
```
### [`isAppOutdated`](#isappoutdated)
- Type: `ComputedRef`
Whether the user's version is outdated.
```
const { isAppOutdated } = useSkewProtection()
if (isAppOutdated.value) {
console.log('User is on an old version')
}
```
### [`isConnected`](#isconnected)
- Type: `ComputedRef`
Whether the SSE/WebSocket connection is currently active.
```
const { isConnected } = useSkewProtection()
if (isConnected.value) {
console.log('Connected to update stream')
}
```
### [`connect()`](#connect)
- Type: `() => void`
Manually establish the connection. Only needed when using `lazy: true`.
```
const skew = useSkewProtection({ lazy: true })
// Connect when user clicks a button
function handleConnect() {
skew.connect()
}
```
### [`disconnect()`](#disconnect)
- Type: `() => void`
Manually close the connection. Useful for cleanup or pausing updates.
```
const { disconnect } = useSkewProtection()
// Disconnect when leaving a section
onBeforeRouteLeave(() => {
disconnect()
})
```
### [`checkForUpdates()`](#checkforupdates)
- Type: `() => Promise`
Manually trigger an update check.
```
const { checkForUpdates } = useSkewProtection()
// Check for updates
await checkForUpdates()
```
### [`onAppOutdated()`](#onappoutdated)
- Type: `(callback: (manifest: NuxtAppManifestMeta | null) => void) => void`
Triggers when it detects a new version, regardless of whether it affects the current session. Uses Nuxt's built-in `app:manifest:update` hook.
**Use case:** Make next page load a hard navigation (forces HTML reload).
```
const { onAppOutdated } = useSkewProtection()
onAppOutdated((manifest) => {
console.log('New version available:', manifest?.id)
// Show passive "Update available" badge
})
```
### [`onCurrentChunksOutdated()`](#oncurrentchunksoutdated)
- Type: `(callback: (payload: ChunksOutdatedPayload) => void) => void`
Triggers **only** when the user's loaded JavaScript modules have been changed in a new deployment.
Consider the case of a user on a blog post when you deploy a new version that only changes the homepage. The user's session is unaffected and they can continue browsing without interruption. In this case, `onCurrentChunksOutdated` will not trigger.
Under the hood this tracks modules using a service worker.
```
const { onCurrentChunksOutdated } = useSkewProtection()
onCurrentChunksOutdated((payload) => {
console.log('Deleted chunks:', payload.deletedChunks)
console.log('Invalidated modules:', payload.invalidatedModules)
console.log('Passed releases:', payload.passedReleases)
// Show notification
alert('Please reload to get the latest version')
})
```
## [Type Definitions](#type-definitions)
```
interface NuxtAppManifestMeta {
id: string
timestamp: number
skewProtection?: {
current: string
versions: Record
}
}
interface VersionInfo {
timestamp: string
expires: string
assets: string[]
deletedChunks?: string[]
}
interface ChunksOutdatedPayload {
deletedChunks: string[]
invalidatedModules: string[]
passedReleases: string[]
}
```
## [Examples](#examples)
### [Custom Invalidation Handler](#custom-invalidation-handler)
```
const { onCurrentChunksOutdated } = useSkewProtection()
onCurrentChunksOutdated(({ invalidatedModules, passedReleases }) => {
// Track in analytics
analytics.track('chunks_outdated', {
count: invalidatedModules.length,
modules: invalidatedModules,
releases: passedReleases
})
// Show custom UI
showUpdateDialog({
title: 'Update Required',
message: \`${invalidatedModules.length} modules need updating (${passedReleases.length} releases passed)\`
})
})
```
### [Version Information Display](#version-information-display)
```