use-notification

Show typed Web Notifications with permission handling.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useWebNotification } from "@vizejs/composable/use-notification";

Try it

Remind before a talk

Ask for notification permission when it is needed and show a reminder.

Open the interactive example

What to observe: Remind me asks for permission the first time, then shows a notification. The output always shows the current permission.

Ask in response to a click so the request is not blocked. on subscribes to click and close events. Every example renders a neutral message until it mounts, so server and client markup match, and then explains what to do when the browser lacks the API.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { useMounted } from "@vizejs/composable/use-mounted";
import { useWebNotification } from "@vizejs/composable/use-notification";

const mounted = useMounted();
const { supported, permission, requestPermission, show } = useWebNotification();

async function remind() {
  if (permission.value !== "granted" && (await requestPermission()) !== "granted") return;
  show("Your talk starts in 10 minutes", { body: "Room A · Vize at Vue Fes Japan" });
}
</script>

<template>
  <div class="composable-example">
    <p>Remind the reader before their talk starts, after asking for permission.</p>
    <button
      type="button"
      :disabled="!mounted || !supported || permission === 'denied'"
      @click="remind"
    >
      Remind me
    </button>
    <output aria-live="polite">{{
      !mounted
        ? "Checking browser support…"
        : supported
          ? `Notification permission: ${permission}`
          : "Notifications are not available in this browser."
    }}</output>
  </div>
</template>

Runtime contract

API

useWebNotification

Show typed Web Notifications with permission handling. show merges reactive defaults with per-call options, asks for permission first when it is still undecided (configurable), and resolves to a discriminated WebNotificationResult. Handlers registered with on apply to every notification this composable shows. The current notification is closed when the owning reactive scope stops. Server rendering: the API is never touched; permission is "unsupported" and supported is false.

function useWebNotification<Data = unknown>( options: UseWebNotificationOptions<Data> = {}, ): WebNotificationControls<Data>

const notify = useWebNotification<{ id: string }>({ defaults: { icon: "/icon.png" } });
notify.on("click", () => window.focus());
await notify.show("Build finished", { data: { id: "42" } });

Types

NotificationOptionsLike

Options accepted by the Notification constructor.

NotificationLike

Minimal Notification instance consumed by useWebNotification.

NotificationHost

Minimal Notification constructor (with its static members).

WebNotificationDefaults

Default notification content for useWebNotification.

UseWebNotificationOptions

Options for useWebNotification.

WebNotificationControls

Reactive state and actions returned by useWebNotification.