VueUseuseWebNotification
Reactive Notification
The Web Notification interface of the Notifications API is used to configure and display desktop notifications to the user.
Demo
Usage
ts
const {
isSupported,
notification,
show,
close,
onClick,
onShow,
onError,
onClose,
} = useWebNotification({
title: 'Hello, VueUse world!',
dir: 'auto',
lang: 'en',
renotify: true,
tag: 'test',
})
if (isSupported.value)
show()
const {
isSupported,
notification,
show,
close,
onClick,
onShow,
onError,
onClose,
} = useWebNotification({
title: 'Hello, VueUse world!',
dir: 'auto',
lang: 'en',
renotify: true,
tag: 'test',
})
if (isSupported.value)
show()
This composable also utilizes the createEventHook utility from '@vueuse/shared`:
ts
onClick((evt: Event) => {
// Do something with the notification on:click event...
})
onShow((evt: Event) => {
// Do something with the notification on:show event...
})
onError((evt: Event) => {
// Do something with the notification on:error event...
})
onClose((evt: Event) => {
// Do something with the notification on:close event...
})
onClick((evt: Event) => {
// Do something with the notification on:click event...
})
onShow((evt: Event) => {
// Do something with the notification on:show event...
})
onError((evt: Event) => {
// Do something with the notification on:error event...
})
onClose((evt: Event) => {
// Do something with the notification on:close event...
})
Type Declarations
Show Type Declarations
typescript
export interface WebNotificationOptions {
/**
* The title read-only property of the Notification interface indicates
* the title of the notification
*
* @default ''
*/
title?: string
/**
* The body string of the notification as specified in the constructor's
* options parameter.
*
* @default ''
*/
body?: string
/**
* The text direction of the notification as specified in the constructor's
* options parameter.
*
* @default ''
*/
dir?: "auto" | "ltr" | "rtl"
/**
* The language code of the notification as specified in the constructor's
* options parameter.
*
* @default DOMString
*/
lang?: string
/**
* The ID of the notification(if any) as specified in the constructor's options
* parameter.
*
* @default ''
*/
tag?: string
/**
* The URL of the image used as an icon of the notification as specified
* in the constructor's options parameter.
*
* @default ''
*/
icon?: string
/**
* Specifies whether the user should be notified after a new notification
* replaces an old one.
*
* @default false
*/
renotify?: boolean
/**
* A boolean value indicating that a notification should remain active until the
* user clicks or dismisses it, rather than closing automatically.
*
* @default false
*/
requireInteraction?: boolean
/**
* The silent read-only property of the Notification interface specifies
* whether the notification should be silent, i.e., no sounds or vibrations
* should be issued, regardless of the device settings.
*
* @default false
*/
silent?: boolean
/**
* Specifies a vibration pattern for devices with vibration hardware to emit.
* A vibration pattern, as specified in the Vibration API spec
*
* @see https://w3c.github.io/vibration/
*/
vibrate?: number[]
}
export interface UseWebNotificationOptions
extends WebNotificationOptions,
ConfigurableWindow {}
/**
* Reactive useWebNotification
*
* @see https://vueuse.org/useWebNotification
* @see https://developer.mozilla.org/en-US/docs/Web/API/notification
* @param title
* @param defaultOptions of type WebNotificationOptions
* @param methods of type WebNotificationMethods
*/
export declare const useWebNotification: (
defaultOptions?: UseWebNotificationOptions
) => {
isSupported: Ref<boolean>
notification: Ref<Notification | null>
show: (
overrides?: WebNotificationOptions
) => Promise<Notification | undefined>
close: () => void
onClick: EventHook<any>
onShow: EventHook<any>
onError: EventHook<any>
onClose: EventHook<any>
}
export type UseWebNotificationReturn = ReturnType<typeof useWebNotification>
export interface WebNotificationOptions {
/**
* The title read-only property of the Notification interface indicates
* the title of the notification
*
* @default ''
*/
title?: string
/**
* The body string of the notification as specified in the constructor's
* options parameter.
*
* @default ''
*/
body?: string
/**
* The text direction of the notification as specified in the constructor's
* options parameter.
*
* @default ''
*/
dir?: "auto" | "ltr" | "rtl"
/**
* The language code of the notification as specified in the constructor's
* options parameter.
*
* @default DOMString
*/
lang?: string
/**
* The ID of the notification(if any) as specified in the constructor's options
* parameter.
*
* @default ''
*/
tag?: string
/**
* The URL of the image used as an icon of the notification as specified
* in the constructor's options parameter.
*
* @default ''
*/
icon?: string
/**
* Specifies whether the user should be notified after a new notification
* replaces an old one.
*
* @default false
*/
renotify?: boolean
/**
* A boolean value indicating that a notification should remain active until the
* user clicks or dismisses it, rather than closing automatically.
*
* @default false
*/
requireInteraction?: boolean
/**
* The silent read-only property of the Notification interface specifies
* whether the notification should be silent, i.e., no sounds or vibrations
* should be issued, regardless of the device settings.
*
* @default false
*/
silent?: boolean
/**
* Specifies a vibration pattern for devices with vibration hardware to emit.
* A vibration pattern, as specified in the Vibration API spec
*
* @see https://w3c.github.io/vibration/
*/
vibrate?: number[]
}
export interface UseWebNotificationOptions
extends WebNotificationOptions,
ConfigurableWindow {}
/**
* Reactive useWebNotification
*
* @see https://vueuse.org/useWebNotification
* @see https://developer.mozilla.org/en-US/docs/Web/API/notification
* @param title
* @param defaultOptions of type WebNotificationOptions
* @param methods of type WebNotificationMethods
*/
export declare const useWebNotification: (
defaultOptions?: UseWebNotificationOptions
) => {
isSupported: Ref<boolean>
notification: Ref<Notification | null>
show: (
overrides?: WebNotificationOptions
) => Promise<Notification | undefined>
close: () => void
onClick: EventHook<any>
onShow: EventHook<any>
onError: EventHook<any>
onClose: EventHook<any>
}
export type UseWebNotificationReturn = ReturnType<typeof useWebNotification>
Source
Contributors
Anthony Fu
Jelf
WuLianN
donotloveshampo
Michael J. Roberts