Notifications¶
An application can have two types of notifications:
- Toasts (Push Notifications): These are used for short, immediate notifications, such as new push notifications or the results of certain actions.
- Notification Dropdown Lists: This feature is used to display more detailed notifications in the top bar menu. These notifications include information like the notification name, time, and a description, often used for conveying the status of long-running tasks.
To start working with push notifications, import the useNotifications
composable from @vc-shell/framework
. This composable allows you to work with notifications in a specific module by specifying the notifyType
as an identifier.
Toasts¶
To display notifications as toasts, you can use the notification
method imported from @vc-shell/framework
. There are two options for displaying toast notifications:
This option provides a single method where you specify the type of notification through the options object:
This option offers separate methods for each notification type, making it more explicit and straightforward to display different types of toast notifications:
Update toast¶
To update a toast, update its content, type, and timeout. The basic usage looks like this:
Duplicate prevention¶
To prevent duplicate toasts, set a notificationId
:
Toast removal¶
You can remove all visible toasts or a specific toast:
How to use notifications in modules¶
To use notifications in modules, you can leverage toast notifications and dropdown lists to provide user updates and alerts.
Toasts¶
When displaying push notifications for a specific module, you need to pass an argument to the useNotifications
method, specifying the type of push notification supported by this module:
To see a toast notification, watch the moduleNotifications
and display the relevant notifications as toasts:
Notification dropdown list¶
All globally registered notification templates are displayed in the notification dropdown list. To register a notification template, you need to create a component that will be used as a template and register it in the module initialization file.
Create custom notification templates¶
Each module can have a notification template that will be displayed in the notification dropdown. If no template is provided, the default template will be used.
-
Create a basic template using the
VcNotificationTemplate
component from@vc-shell/framework
. You can pass your markup in Vue's default slot, or you can create your own template from scratch. Here's the basic usage withVcNotificationTemplate
:my-module-name/components/notifications/template.vue Note
Here we have a
notificationClick
event that is emitted when the notification is clicked. This event is required. If you don't emit it, the notification list will not be closed when the notification is clicked. -
Make your template globally available. To do this, add it to the module initialization file when initializing the module: