@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 |
Related Packages
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 | |
| 1.5.7 | ^3.3.4 | ISC | |
| 1.5.6 | ^3.3.4 | ISC | |
| 1.5.5 | ^3.3.4 | ISC | |
| 1.5.4 | ^3.3.4 | ISC | |
| 1.5.3 | ^3.3.4 | ISC | |
| 1.5.2 | ^3.3.4 | ISC | |
| 1.5.1 | ^3.3.4 | ISC | |
| 1.4.1 | ^3.3.4 | ISC | |
| 1.3.10 | ^3.3.4 | ISC | |
| 1.3.9 | ^3.3.4 | ISC | |
| 1.3.8 | ^3.3.4 | ISC | |
| 1.3.7 | ^3.3.4 | ISC | |
| 1.3.6 | ^3.3.4 | ISC | |
| 1.3.5 | ^3.3.4 | ISC | |
| 1.3.4 | ^3.3.4 | ISC | |
| 1.3.3 | ^3.3.4 | ISC | |
| 1.3.2 | ^3.3.4 | ISC | |
| 1.3.1 | ^3.3.4 | ISC | |
| 1.2.4 | ^3.3.4 | ISC | |
| 1.2.3 | ^3.3.4 | ISC | |
| 1.2.2 | ^3.3.4 | ISC | |
| 1.2.1 | ^3.3.4 | ISC | |
| 1.1.3 | ^3.3.4 | ISC | |
| 1.1.2 | ^3.3.4 | ISC | |
| 1.1.1 | ^3.3.4 | ISC |
Showing the latest 30 of 51. See every release on npm