NotificationSlideover
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
<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
component: XANotificationSlideover
package: "@xenterprises/nuxt-x-app"
category: Notification
use-when: >
Place XANotificationSlideover once at the layout root. Use the
useXNotifications composable to push notifications from anywhere —
API responses, background jobs, socket events — and the component
will reflect changes automatically. No additional wiring between
XANotificationBell and XANotificationSlideover is required.