1---
2category: Browser
3---
4 
5# useWebNotification
6 
7Reactive [Notification](https://developer.mozilla.org/en-US/docs/Web/API/notification)
8 
9The Web Notification interface of the Notifications API is used to configure and display desktop notifications to the user.
10 
11## Usage
12 
13::: tip
14Before an app can send a notification, the user must grant the application the right to do so. The user's OS settings may also prevent expected notification behaviour.
15:::
16 
17```ts
18import { useWebNotification } from '@vueuse/core'
19 
20const {
21  isSupported,
22  notification,
23  permissionGranted,
24  show,
25  close,
26  onClick,
27  onShow,
28  onError,
29  onClose,
30} = useWebNotification({
31  title: 'Hello, VueUse world!',
32  dir: 'auto',
33  lang: 'en',
34  renotify: true,
35  tag: 'test',
36})
37 
38if (isSupported.value && permissionGranted.value)
39  show()
40```
41 
42This composable also utilizes the createEventHook utility from '@vueuse/shared`:
43 
44```ts
45import { useWebNotification } from '@vueuse/core'
46 
47const { onClick, onShow, onError, onClose, } = useWebNotification()
48// ---cut---
49onClick((evt: Event) => {
50  // Do something with the notification on:click event...
51})
52 
53onShow((evt: Event) => {
54  // Do something with the notification on:show event...
55})
56 
57onError((evt: Event) => {
58  // Do something with the notification on:error event...
59})
60 
61onClose((evt: Event) => {
62  // Do something with the notification on:close event...
63})
64```
65 
66## Type Declarations
67 
68```ts
69export interface WebNotificationOptions {
70  /**
71   * The title read-only property of the Notification interface indicates
72   * the title of the notification
73   *
74   * @default ''
75   */
76  title?: string
77  /**
78   * The body string of the notification as specified in the constructor's
79   * options parameter.
80   *
81   * @default ''
82   */
83  body?: string
84  /**
85   * The text direction of the notification as specified in the constructor's
86   * options parameter.
87   *
88   * @default ''
89   */
90  dir?: "auto" | "ltr" | "rtl"
91  /**
92   * The language code of the notification as specified in the constructor's
93   * options parameter.
94   *
95   * @default DOMString
96   */
97  lang?: string
98  /**
99   * The ID of the notification(if any) as specified in the constructor's options
100   * parameter.
101   *
102   * @default ''
103   */
104  tag?: string
105  /**
106   * The URL of the image used as an icon of the notification as specified
107   * in the constructor's options parameter.
108   *
109   * @default ''
110   */
111  icon?: string
112  /**
113   * Specifies whether the user should be notified after a new notification
114   * replaces an old one.
115   *
116   * @default false
117   */
118  renotify?: boolean
119  /**
120   * A boolean value indicating that a notification should remain active until the
121   * user clicks or dismisses it, rather than closing automatically.
122   *
123   * @default false
124   */
125  requireInteraction?: boolean
126  /**
127   * The silent read-only property of the Notification interface specifies
128   * whether the notification should be silent, i.e., no sounds or vibrations
129   * should be issued, regardless of the device settings.
130   *
131   * @default false
132   */
133  silent?: boolean
134  /**
135   * Specifies a vibration pattern for devices with vibration hardware to emit.
136   * A vibration pattern, as specified in the Vibration API spec
137   *
138   * @see https://w3c.github.io/vibration/
139   */
140  vibrate?: number[]
141}
142export interface UseWebNotificationOptions
143  extends ConfigurableWindow, WebNotificationOptions {
144  /**
145   * Request for permissions onMounted if it's not granted.
146   *
147   * Can be disabled and calling `ensurePermissions` to grant afterwords.
148   *
149   * @default true
150   */
151  requestPermissions?: boolean
152}
153export interface UseWebNotificationReturn extends Supportable {
154  notification: Ref<Notification | null>
155  ensurePermissions: () => Promise<boolean | undefined>
156  permissionGranted: ShallowRef<boolean>
157  show: (
158    overrides?: WebNotificationOptions,
159  ) => Promise<Notification | undefined>
160  close: () => void
161  onClick: EventHookOn<Event>
162  onShow: EventHookOn<Event>
163  onError: EventHookOn<Event>
164  onClose: EventHookOn<Event>
165}
166/**
167 * Reactive useWebNotification
168 *
169 * @see https://vueuse.org/useWebNotification
170 * @see https://developer.mozilla.org/en-US/docs/Web/API/notification
171 */
172export declare function useWebNotification(
173  options?: UseWebNotificationOptions,
174): UseWebNotificationReturn
175```
176