useNotification

useNotifcation returns the function you can use to show notifications.

interface NotificationOptions {
  placement?: NotificationPlacement;
  title?: string | VNode;
  text?: string | VNode;
  color?: string;
  textColor?: string;
  duration?: number;
  pauseOnHover?: boolean;
  noCloseButton?: boolean;
  noPadding?: boolean;
  width?: string;
  before?: string | VNode;
  containerClass?: string;
  onClose?: () => void;
}

type NotificationPlacement = "top-left" | "top" | "top-right" | "bottom-right" | "bottom" | "bottom-left";

Styling

You can use color option to set bakground color, textColor for setting color of text ( by default textColor is white ).

Duration

Notification duration in ms. default is 4000

Width

Notification width. defaults to 360px. on sizes smaller than 600px the notification becomes full width

Before

Can be used for adding icons or anything you want before the main container.

Close

You can close the notification programatically using the object being returned from calling the notification.

Examples

noCloseButton

boolean defaults to false. true hides close button.

noPadding

noPadding defaults to false. true sets notification padding to 0.

pauseOnHover

boolean defaults to false.

If true pauses the timer for closing notification when mouse is over notification. Resumes on mouseout.

onClose

() => void

Called on notification close.

Using outside setup

Since useNotification is using inject inside it, it can't be used outside of vue setup context. To solve this you can import the factory function and creating your own useNotification composable and freely use it anywhere in your app for example Pinia/Vuex.

The notificationFactory accepts app instance as it's first parameter returns the same value as useNotification.

import { notificationFactory } from "sevue";
import VueInstance from '@/main' // or wherever your app is being exported

export default () => {
  return notificationFactory(VueInstance)
}

Or for Nuxt JS:

import { notificationFactory, type NotificationInject } from "sevue";

export default () => {
  const nuxtApp = useNuxtApp()
  return notificationFactory(nuxtApp.vueApp) as NotificationInject
}