Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue3-notifier

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-notifier

vue3-notifier is a powerful notification plugin with a very easy to use interface and high customizability as we gonna discuss in the rest of documentation.

  • 1.0.3
  • latest
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

vue3-notifier

vue3-notifier is a powerful notification plugin with a very easy to use interface and high customizability as we gonna discuss in the rest of documentation.

Installation

# Using yarn
yarn add vue3-notifier

# Using npm
npm i vue3-notifier --save

Usage

// main.ts
import 'vue3-notifier/style.css';

import { createApp } from 'vue';
import { useNotifierPlugin } from 'vue3-notifier';

import App from './App.vue';

createApp(App)
  .use(useNotifierPlugin())

  .mount('#app');
// App.vue
import { useNotifier } from 'vue3-notifier';

const notifier = useNotifier();
notifier.notify();

Examples

Example are add in docs/examples.md Find More!

API Documentation

Note: All props are optionals as the plugin provide a default value for every prop so that you only need to pass as minial config as possible.

NotifierPluginOptions
ProptypedefaultDescription
idString"default"id is used while initializing useNotifierPlugin which provide a unique key to allow using plugin more than once.
timeoutnumber3_000A number in ms that indicates the time before the notifiction gets destroied.
persistentbooleanfalseIndicates that notification shouldn't be automatically destroied.
newOnTopbooleanfalseIndicates new notifications should be on top or not.
maxNotifictionsnumber3Max allowed number of notifictions to be shown at once on screen.
componentNotifierComponentDefaultNotifier.vueA vue component which will be rendered as a notifiction.
propsRecord<string, any>{}Extra props to be passed to notification component.
pluginsPlugin[][]A set of plugins which injected to notifier app.
showProgressBarbooleanfalseToggle visability; true -> visible, false -> hidden.
closablebooleantrueToggle visability of close button.
pauseOnHoverbooleantrueToggle pausing time when user hover over notification; this is extremly useful to improve ux.
position'top' | 'top center' | 'top left' | 'top right' | 'bottom' | 'bottom center' | 'bottom left' | 'bottom right' | 'center' | 'center center' "bottom right"Indicates position of notifications container.
closeButtonNotifierComponentDefaultCloseBtn.vueA vue component that will be used as a close button.
showCloseButtonOnHoverbooleanfalseIf true then close button will be hidden untill the user hover over notification.
debugbooleanfalseEnables some logs for debugging (recommended to be enabled in development import.meta.env.DEV || process.env.NODE_ENV === 'development').
silentbooleanfalseAvoid throwing error while initializing if something went wrong.
loggerPartial<NotifierLogger>loggerLogger which will be used in debug mode.
containerOffsetnumber20Offset between container holding notifications and the edges of the screen (in px).
containerWidthnumber350Notifications' container width (in px).
containerClassListstring[][]Classlist will be appended to notifications' container.
containerStylesStyleValue{}Styles will be added to notifications' container.
notificationOffsetnumber20Gap between each notification.
notificationClassListstring[][]ClassList will be appended to each notification.
notificationStylesStyleValue{}Styles will be added to each notification.
hideAllButtonNotifierComponentHideAllBtn.vueAppend a button which hide all notfications.
showHideAllButtonbooleantrueToggle visability of hide all button.
NotifierOptions

Note: The following props are exactly the same as above so we won't mention them in NotifierOptions api.

timeout, persistent, component, props, showProgressBar, closable, pauseOnHover, closeButton, showCloseButtonOnHover, notificationClassList, notificationStyles.

proptypedefaultdescription
titlestring""Title to show on notifiction supports html.
descriptionstring""Text to be render in notifiction supports html.
showIconbooleantrueToggle icon visability; true -> show icon, false -> hide icon.
iconNotifierComponentDefaultIcon.vueA vue to be used as notificaiton's icon.
type'default' | 'info' | 'warning' | 'success' | 'error'"default"type of the notification.
NotifierService
methodparamsreturnsdescription
updatePluginOptions(options?: NotifierPluginOptions)voidAllow to update plugin options after initializing; Note: not all options can be updates as they require reinitializing the plugin (e.g: plugins).
notify(options?: NotifierOptions)Required<NotifierOptions & NotifierExtraOptions>Open a new notification with the specified options.
destroy(id: number)booleanDestroy notification using it's id.
destroyAll()voidDestroy all notifications in that specific app.
Props Helpers
methodpropNametypedescription
makePluginOptionsPropspluginOptionsRequired<NotifierPluginOptions>Defines prop for plugin global options.
makeNotifierServicePropsnotifierServiceNotifierServiceDesfines prop for notifier service.
makeNotificationPropsnotificationRequired<NotifierOptions & NotifierExtraOptions>Defines prop for notification.

Note: makeNotifierProps is a combine of the 3 above methods.

Composables
methodparamsreturndescription
useNotifierPlugin(options?: NotifierPluginOptions)PluginCreates a new notifier app with specific id.
useNotifier(id: string = 'default')NotifierServiceGet the service of the notifier app with that specific id.
Hooks
hookparamsreturndescription
useDestroyTimer(options: Required<NotifierOptions & NotifierExtraOptions>,globalOptions: Required<NotifierPluginOptions>,onFinish: () => void)ComputedRef<{value: number;pauseTimeout: () => void;resumeTimeout: () => void }>A helper hook to count down for timeout of destroying a notification also providing pause/resume method to allow stop/continue of timeout.

FAQs

Package last updated on 22 Jan 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc