Notify

A utility function to show toast notifications dynamically mounted on the page. Supports multiple notification types, customizable titles, messages, and positions, with automatic dismissal and smooth animations.

<template>
  <!-- plugin example -->
  <button @click="$notify({title: 'Success!', message: 'Object saved'})"> </button>
</template>
<script> 
import { notify } from '@opengis/core';

// function example
notify({
  type: 'success',
  title: 'Success!',
  message: 'Your changes have been saved.',
  position: 'top',
});
</script>

Interface

export type Notify = {
  type?: 'success' | 'warning' | 'error' | 'info';
  title: string;
  message: string;
  position?: 'top' | 'right-bottom' | 'left-bottom' | 'bottom';
};

API

Parameter	Type	Default	Description
type	'success' | 'warning' | 'error' | 'info'	'info'	Notification type, controls icon and styling
title	string	required	Notification title
message	string	required	Notification message
position	'top' | 'right-bottom' | 'left-bottom' | 'bottom'	'right-bottom'	Screen position where notifications appear

Type

Defines the message style and semantic meaning — e.g., success for positive feedback, warning for caution, error for failure, and info for neutral notifications.

notify({
    type: "success", // type: 'success' | 'warning' | 'error' | 'info'
    title: "Changes saved",
    message: "Your product changes have been saved.",
    position: "right-bottom",
  });

Position

Specifies where the element appears on the screen — top, bottom, or anchored to a bottom corner (right-bottom, left-bottom).

Top

notify({
  type: "info",
  title: "Changes saved",
  message: "Your product changes have been saved.",
  position: "top", // 'top' | 'right-bottom' | 'left-bottom' | 'bottom'
});