Composables
useXNotifications
Manages notification bell state including the feed list, unread count, and mark-read actions.
useXNotifications
Drives the notification bell UI. Fetches the notification feed, tracks unreadCount, and exposes markRead / markAllRead helpers that optimistically update the reactive state. Consumed internally by the XANotificationBell and XANotificationSlide components.
Usage
const {
notifications,
unreadCount,
loading,
fetch,
markRead,
markAllRead,
} = useXNotifications()
Returns
| Key | Type | Description |
|---|---|---|
notifications | Ref<Notification[]> | Reactive array of notification objects. |
unreadCount | ComputedRef<number> | Number of notifications where read is false. |
loading | Ref<boolean> | true while the feed is being fetched. |
fetch | () => Promise<void> | Loads (or refreshes) the notification feed from the API. |
markRead | (id: string | number) => Promise<void> | Marks a single notification as read and updates the local state. |
markAllRead | () => Promise<void> | Marks every notification as read in one call. |
Example
const { notifications, unreadCount, markRead, markAllRead } = useXNotifications()
// Fetch on mount and poll every 60 seconds
onMounted(fetch)
const interval = setInterval(fetch, 60_000)
onUnmounted(() => clearInterval(interval))
async function dismiss(id: string) {
await markRead(id)
}
AI Context
composable: useXNotifications
package: "@xenterprises/nuxt-x-app"
use-when: >
Building or customising the notification bell, slide-over panel, or any
feature that needs to display an unread badge count. Fetch on mount and
optionally poll to keep the count live.
pairs-with: XANotificationBell, XANotificationSlide, XANotificationItem