Guides
UI Examples
Last updated by
Harlan Wilton
in doc: sync. Minimal Pill
Compact notification using Nuxt UI.
✨
Update available
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>
Native CSS
app.vue
<template>
<SkewNotification v-slot="{ isCurrentChunksOutdated, dismiss, reload, timeAgo }">
<Transition name="slide-up">
<div v-if="isCurrentChunksOutdated" class="skew-notification">
<div class="skew-notification-content">
<div class="skew-notification-message">
<span class="skew-notification-icon">✨</span>
<div>
<div class="skew-notification-title">
New update available!
</div>
<div v-if="timeAgo" class="skew-notification-subtitle">
Released {{ timeAgo }}
</div>
</div>
</div>
<div class="skew-notification-actions">
<button class="skew-button skew-button-secondary" @click="dismiss">
Dismiss
</button>
<button class="skew-button skew-button-primary" @click="reload">
Refresh
</button>
</div>
</div>
</div>
</Transition>
</SkewNotification>
</template>
<style>
.skew-notification {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 9999;
max-width: 400px;
}
.skew-notification-content {
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
padding: 1rem 1.25rem;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.skew-notification-message {
display: flex;
gap: 0.75rem;
margin-bottom: 1rem;
}
.skew-notification-title {
font-weight: 600;
font-size: 0.9375rem;
}
.skew-notification-subtitle {
font-size: 0.8125rem;
color: #666;
}
.skew-notification-actions {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}
.skew-button {
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
border: none;
cursor: pointer;
}
.skew-button-primary {
background: #18181b;
color: white;
}
.skew-button-secondary {
background: #f4f4f5;
color: #52525b;
}
.slide-up-enter-active, .slide-up-leave-active {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-up-enter-from {
opacity: 0;
transform: translateY(1rem);
}
</style>
Custom styled notification without UI library:
Did this page help you?