Notification
Notification
The Notification category provides a two-component notification system. XANotificationBell is the header trigger; XANotificationSlideover is the panel. Both components connect to the shared useXNotifications composable, so state (open/closed, read/unread counts, notification list) is automatically synchronized.
Components
<XANotificationBell />
A button that displays the configured bell icon. When there are unread notifications, a red badge with the unread count overlays the top-right corner (capped at 99+). Clicking calls notifications.toggle() from useXNotifications.
<!-- In your header -->
<XANotificationBell
icon="i-lucide-bell"
size="sm"
color="neutral"
variant="ghost"
:show-badge="true"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | String | 'i-lucide-bell' | Icon name for the button |
color | String | 'neutral' | Button color |
variant | String | 'ghost' | Button variant |
size | String | 'sm' | Button size |
showBadge | Boolean | true | Show the unread count badge |
<XANotificationSlideover />
A USlideover panel that lists all current notifications. Each item shows an icon, title, optional description, and relative time. A colored status dot reflects the notification's status field (success, warning, error, info). Read notifications are dimmed. Users can dismiss individual items or mark all as read via the footer controls.
<!-- Typically placed at the app root or layout level -->
<XANotificationSlideover
title="Notifications"
side="right"
empty-message="You're all caught up"
@click="handleNotificationClick"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | 'Notifications' | Slide-over panel title |
side | String | 'right' | Slide direction: 'left' or 'right' |
emptyMessage | String | 'No notifications' | Message shown when the list is empty |
Events
| Event | Payload | Description |
|---|---|---|
click | notification | Emitted when a notification item is clicked; also marks it as read |
Setup
Both components rely on useXNotifications. Add notifications by calling the composable's methods from anywhere in your app:
const notifications = useXNotifications()
// Add a notification
notifications.add({
id: 'deploy-complete',
title: 'Deployment complete',
description: 'v2.4.0 is live.',
icon: 'i-lucide-rocket',
status: 'success',
time: 'Just now'
})
// Open the panel programmatically
notifications.open()
AI Context
category: Notification
package: "@xenterprises/nuxt-x-app"
use-when: >
Add XANotificationBell to the application header and XANotificationSlideover
once at the layout root. Use the useXNotifications composable to push
notifications from anywhere — API responses, background jobs, socket
events — and the components will reflect changes automatically. No
additional wiring between the two components is required.