@gianrase/vue3-notifications

Easy-configurable Vue3 notifications system.
1,495
Install
npm install @gianrase/vue3-notifications
Latest Version:1.6.6
Vue:3
License:ISC
Last Updated:Dec 7, 2023
Links: GitHub  ·  npm
Maintainer: gianrase

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

Related Packages

pangea-lib

Installation

145,633
@voerro/vue-notifications

Easily display notifications to your users

6,096 1

Version History

Version Released Vue License
1.6.6 ^3.3.4 ISC
1.6.5 ^3.3.4 ISC
1.6.4 ^3.3.4 ISC
1.6.2 ^3.3.4 ISC
1.6.1 ^3.3.4 ISC