@dracul/notification-frontend

Dracul notification module

This module contains components that allow you to view the notifications created with the notification module backend.

This module contains the following components:

• A bell button where the number of notifications are displayed.
• A section where all the notifications of a certain user are listed, where the user can view notifications and mark them as read or unread.

Installation:

npm i @dracul/notification-frontend

Usage example:

An example of using the NotificationButton component*.

<template>
    <div>
        <notification-button :userId="123"/>
    </div>
</template>

<script>
    import {NotificationButton} from '@dracul/notification-frontend'

    export default {
    name:"SomeName",
    components: {NotificationButton}
}

</script>

Components available

NotificationButton

Definition and usage

A button with a bell icon showing the number of notifications received. Also, if you press the button, a small list with more detailed notifications will be displayed.

Button view

Import component

import {NotificationButton} from '@dracul/notification-frontend'

Props

Name	Type	Description
userId	ObjectID	Required. The user ID to whom the notifications will be shown.
colorIcon	String	Required. Will be used as the color of the bell icon. Value default: 'onPrimary'.

Pages that the module exposes.

This module integrates with Vue Router, the module exports the routes of each page. To use these routes you need to merge them with the routes of your project.

notificationRoutes

Definition and usage

A page where the list of user notifications is displayed.

Page view

How to import this page into your project:

import {notificationPage} from '@dracul/notification-frontend'