Notifying Users

Introduction

Using the update strategies the module knows in (mostly in real-time) when a new version is deployed. To get these updates to your users you can use the built-in <SkewNotification> component or build your own using the useSkewProtection() composable.

Update notifications can be an annoying user experience if not handled properly. To improve this, the module provides two key hooks to differentiate between every new deployment (onAppOutdated()) and when the user's loaded JavaScript modules are invalidated (onCurrentChunksOutdated()).

Setting Up Notifications

The built-in SkewNotification.vue component uses onCurrentChunksOutdated to only show notifications when the user's session is genuinely affected:

It's recommended to add this code to your main layout so it's always available.

<template>
  <SkewNotification v-slot="{ isCurrentChunksOutdated }">
    <Transition name="slide-up">
      <div v-if="isCurrentChunksOutdated">
        Your application has been updated.
      </div>
    </Transition>
  </SkewNotification>
</template>

For more UI examples see the UI Examples guide.

How It Works

onCurrentChunksOutdated

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.

onAppOutdated

Triggers whenever a new version is detected, 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 reloading the HTML).

const skew = useSkewProtection()

skew.onAppOutdated((manifest) => {
  console.log('New version available:', manifest?.id)
  // Show passive "Update available" badge
})

Server-Side Skew Detection

Detect outdated clients in server handlers using isClientOutdated:

import { isClientOutdated } from 'nuxt-skew-protection/server'

export default defineEventHandler((event) => {
  if (isClientOutdated(event)) {
    setResponseStatus(event, 409)
    return { error: 'Client outdated', requiresReload: true }
  }

  return { data: '...' }
})