<SkewNotification>
A headless Vue component that provides notification logic without imposing any UI.
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
The component provides these props via scoped slot:
isCurrentChunksOutdated
- Type:
boolean
Whether the notification should be shown.
Automatically set to true when:
- User's loaded modules are invalidated by a new deployment
- Can be manually controlled via the
openprop
<SkewNotification v-slot="{ isCurrentChunksOutdated }">
<div v-if="isCurrentChunksOutdated">
Update available!
</div>
</SkewNotification>
dismiss()
- Type:
() => void
Dismiss the notification (sets isCurrentChunksOutdated to false).
<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.
Calls window.location.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
Payload from chunks outdated event with detailed information.
<SkewNotification v-slot="{ isCurrentChunksOutdated, payload }">
<div v-if="isCurrentChunksOutdated">
<p>Outdated chunks: {{ payload?.outdatedChunks.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
forceOpen
- Type:
boolean - Default:
undefined
Force notification open for testing/debugging.
<script setup>
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 reload is triggered.
<SkewNotification @reload="console.log('reloading')">
<!-- ... -->
</SkewNotification>
Examples
See UI Examples for complete examples including Nuxt UI, toast notifications, banners, and more.