Notifications

useOokoNotif accesses the notification controller installed by the Ooko plugin for the current Vue application.

<script setup lang="ts">
import { useOokoNotif } from "ooko-ui/notif";

const notif = useOokoNotif();

function save(): void {
  notif.success({ title: "Saved", message: "Your preferences are up to date." });
}
</script>

<template>
  <button type="button" @click="save">Save</button>
</template>

The application root must render exactly one <ONotif /> alongside its content. The composable and viewport share state only within that Vue application.

API reference

Returns the notification controller provided by the Ooko plugin for the current Vue application.

function useOokoNotif(): UseOokoNotifReturn

Parameters

Parameter	Type	Required	Default	Description
none	none	none	none	none

Returns

Member	Type	Description
notifications	Readonly<Ref<readonly OokoNotif[], readonly OokoNotif[]>>	Readonly notifications currently displayed by the viewport.
show	(variant: OokoNotifVariant, options: OokoNotifOptions) => number	Creates a notification with an explicit semantic variant.
info	(options: OokoNotifVariantOptions) => number	Creates an informational notification.
success	(options: OokoNotifVariantOptions) => number	Creates a success notification.
warning	(options: OokoNotifVariantOptions) => number	Creates a warning notification.
danger	(options: OokoNotifVariantOptions) => number	Creates a danger notification.
close	(id: number) => void	Removes a notification by its identifier.

Related types

Type	Definition
OokoNotif	interface OokoNotif { /** Stable identifier returned when the notification is created. */ id: number; /** Semantic treatment applied to the notification. */ variant: OokoNotifVariant; /** Optional title displayed above the message. */ title?: string; /** Main text announced to assistive technologies. */ message: string; /** Time in milliseconds before the notification closes, or null to keep it visible. */ duration: number | null; /** Viewport position used to group and stack the notification. */ position: OokoNotifPosition; }
OokoNotifController	interface OokoNotifController { /** Readonly notifications currently displayed by the viewport. */ notifications: Readonly<Ref<readonly OokoNotif[]>>; /** Creates a notification with an explicit semantic variant. */ show: (variant: OokoNotifVariant, options: OokoNotifOptions) => number; /** Creates an informational notification. */ info: (options: OokoNotifVariantOptions) => number; /** Creates a success notification. */ success: (options: OokoNotifVariantOptions) => number; /** Creates a warning notification. */ warning: (options: OokoNotifVariantOptions) => number; /** Creates a danger notification. */ danger: (options: OokoNotifVariantOptions) => number; /** Removes a notification by its identifier. */ close: (id: number) => void; }
OokoNotifOptions	interface OokoNotifOptions { /** Optional title displayed above the message. */ title?: string; /** Main text announced to assistive technologies. */ message: string; /** Time in milliseconds before the notification closes. Defaults to 5000. Use nullto keep it visible. */ duration?: number | null; /** Viewport position used to group and stack the notification. Defaults tobottom-end. */ position?: OokoNotifPosition; }
OokoNotifPosition	type OokoNotifPosition = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
OokoNotifVariant	type OokoNotifVariant = "info" | "success" | "warning" | "danger";
UseOokoNotifReturn	type UseOokoNotifReturn = OokoNotifController;

SSR and hydration

The plugin creates a fresh controller per Vue application and does not read browser globals. ONotif uses Vue Teleport only while rendering; it neither creates DOM nodes imperatively nor starts timers during server rendering. Notifications should be created from client interactions, not server rendering.