@gianrase/vue3-notifications

Vue3 Notifications

Setup

npm install --save @gianrase/vue3-notifications

yarn add @gianrase/vue3-notifications

Add the vue3-notifications dependencies to your primary.js:

import { createApp } from 'vue';
import AppNotifications from '@gianrase/vue3-notifications';
import '@gianrase/vue3-notifications/style.css';

const app = createApp({...});
app.use(AppNotifications, { colors: { ... } });

Color name	Default
primary	#000000
primaryDark	rgba(255, 255, 255, 0.9)
bgPrimary	#D3D3D3
bgPrimaryDark	#373737
bgHover	#C3C3C3
bgHoverDark	#343434
notificationShadow	#0000004d
notificationShadowDark	#a0a0a01a
btnCross	#000000
btnCrossDark	rgba(255, 255, 255, 0.9)
btnRemoveAll	#0644B7
btnRemoveAllDark	#0052EA
borderLeftInfo	#01579b
borderLeftInfoDark	#252cf4
borderLeftSuccess	#1b5e20
borderLeftSuccessDark	#1cd509
borderLeftWarning	#e65100
borderLeftWarningDark	#e88400
borderLeftError	#c62828
borderLeftErrorDark	#f42525

Add the global component to your App.vue:

<AppNotifications removeAllMessage="Remove all" :isLightMode="true" />

Name	Type	Default	Description
removeAllMessage	string / (() => string)	'Remove all'	The message that the 'Remove All Notifications' button will display
isLightMode	boolean / (() => boolean)	true	Choose between light and dark mode

Usage

Trigger notifications from any file:

import { addNotification } from '@gianrase/vue3-notifications';

addNotification(message, type, timeout);

Name	Type	Default	Description
message	string / (() => string)	none	The message of the notification
type	'info' / 'success' / 'warning' / 'error'	'info'	'info' = blue notification / 'success' = green notification / 'warning' = yellow notification / 'error' = red notification
timeout	number	15000	The amount of time the notification will be displayed on the screen in milliseconds