<SkewNotification>
A headless Vue component that provides notification state and actions. You supply the template and styles.
useSkewProtection() internally and auto-connects on mount. For manual connection control (lazy mode), use the composable directly with useSkewProtection({ lazy: true }).Basic Usage
<template>
<SkewNotification v-slot="{ isCurrentChunksOutdated, dismiss, reload, timeAgo }">
<div v-if="isCurrentChunksOutdated" class="notification">
<p>New version available! ({{ timeAgo }})</p>
<button @click="reload">
Reload
</button>
<button @click="dismiss">
Dismiss
</button>
</div>
</SkewNotification>
</template>Slot Props
Read these props from the scoped slot:
version
- Type:
string
The user's current version (from cookie or buildId).
<SkewNotification v-slot="{ version }">
<div>
<p>Current version: {{ version }}</p>
</div>
</SkewNotification>isCurrentChunksOutdated
- Type:
boolean
Whether the notification should be shown.
Automatically set to true when:
- User's loaded modules are invalidated by a new deployment
- The
forceOpenprop istrue
<SkewNotification v-slot="{ isCurrentChunksOutdated }">
<div v-if="isCurrentChunksOutdated">
Update available!
</div>
</SkewNotification>dismiss()
- Type:
() => void
Dismiss the current update across notification components in this app. The dismissal survives component remounts. A later deployment can show a new notification.
<SkewNotification v-slot="{ isCurrentChunksOutdated, dismiss }">
<div v-if="isCurrentChunksOutdated">
<p>Update available!</p>
<button @click="dismiss">Not now</button>
</div>
</SkewNotification>reload()
- Type:
() => void
Reload the page to get the new version.
Emits reload, then calls reloadNuxtApp({ force: true, persistState: true }). Nuxt state survives the reload.
<SkewNotification v-slot="{ isCurrentChunksOutdated, reload }">
<div v-if="isCurrentChunksOutdated">
<button @click="reload">Update Now</button>
</div>
</SkewNotification>timeAgo
- Type:
string
Human-readable time since the release.
Examples: "just now", "2 minutes ago", "1 hour ago"
<SkewNotification v-slot="{ isCurrentChunksOutdated, timeAgo }">
<div v-if="isCurrentChunksOutdated">
<p>Released {{ timeAgo }}</p>
</div>
</SkewNotification>releaseDate
- Type:
Date | null
The release date as a Date object.
<SkewNotification v-slot="{ isCurrentChunksOutdated, releaseDate }">
<div v-if="isCurrentChunksOutdated">
<p>Released: {{ releaseDate?.toLocaleString() }}</p>
</div>
</SkewNotification>payload
- Type:
ChunksOutdatedPayload | null
The ChunksOutdatedPayload from the chunk invalidation event.
<SkewNotification v-slot="{ isCurrentChunksOutdated, payload }">
<div v-if="isCurrentChunksOutdated">
<p>Deleted chunks: {{ payload?.deletedChunks.length }}</p>
<p>Invalidated modules: {{ payload?.invalidatedModules.length }}</p>
</div>
</SkewNotification>isAppOutdated
- Type:
boolean
Whether entire app is outdated (not just current chunks).
<SkewNotification v-slot="{ isAppOutdated }">
<div v-if="isAppOutdated">
<p>Full app update available</p>
</div>
</SkewNotification>Props
The forceOpen prop (boolean, default undefined) forces the notification open for testing/debugging.
<script setup lang="ts">
const forceOpen = ref(true)
</script>
<template>
<SkewNotification v-slot="{ reload }" :force-open="forceOpen">
<div>
<button @click="reload">
Update
</button>
</div>
</SkewNotification>
</template>Events
@dismiss
Emitted when notification is dismissed.
<SkewNotification @dismiss="console.log('dismissed')">
<!-- ... -->
</SkewNotification>@reload
Emitted when the component triggers a reload.
<SkewNotification @reload="console.log('reloading')">
<!-- ... -->
</SkewNotification>See UI Examples for Nuxt UI and CSS templates.