Notification

Floats in the corners of the page, displaying global notification and reminder messages.

Basic Usage

Notification is suitable for passive reminders of system-level notifications.

Basic Usage

Different States

Used to display system notifications such as "Success, Warning, Info, Error".

Different States

Custom Position

Use the position property to set the position of the notification popup.

Custom Position

Custom Duration

Set the duration property to 0 to prevent the notification from closing automatically.

Custom Duration

Use HTML Snippet

Set dangerouslyUseHTMLString to true to treat the message property as an HTML snippet.

Warning

While the message property supports passing HTML snippets, dynamic rendering of arbitrary HTML is very dangerous. Ensure the content of message is trusted. Never assign user-submitted content to the message property.

Use HTML Snippet

Hide Close Button

Set showClose to false to hide the close button.

Hide Close Button

Max Count

Use the max property to limit the maximum number of notifications displayed at the same position. When the limit is exceeded, the oldest notification will be automatically closed.

Max Limit

Functional Message 2.8.0

The message property can be a VNode, or a function that returns a VNode.

Warning

While the message property supports passing HTML snippets, dynamic rendering of arbitrary HTML is very dangerous as it can easily lead to XSS attacks. Therefore, when dangerouslyUseHTMLString is enabled, ensure the content of message is trusted. Never assign user-submitted content to the message property.

Functional Message

Use in Nuxt

The Notification component is deeply integrated with Nuxt 3/4. As an imperative component, it automatically identifies server/client environments, ensuring that notification popups are only executed in the client browser to avoid errors during the SSR phase.

Use in Nuxt

SSR Notes:

• ✅ Safe environment identification: Environment detection is encapsulated inside the functions, so calling them in Nuxt's setup or lifecycles is safe.
• ✅ Auto-import: In Nuxt projects, the YhNotification function is automatically scanned and imported without additional manual import.
• ✅ Style preloading: Component styles are automatically injected with the Nuxt page rendering, ensuring visual effects meet expectations when popping up.
• ⚠️ Server constraints: Calling this function during useAsyncData or in a server-side Middleware will have no visual output (since there is no DOM).
• 💡 Global methods: The Nuxt plugin automatically mounts $notify globally. You can also call it via this.$notify in options-style components.

Error Log Integration

Combined with Nuxt's app:error hook, you can use YhNotification.error to capture and display global unhandled runtime errors.

Call Signature

YhNotification supports multiple calling methods. Choose the appropriate one according to your project needs.

Composition API (Recommended)

Import and use directly in <script setup>:

<template>
  <yh-button @click="showNotification">Show Notification</yh-button>
</template>

<script setup lang="ts">
import { YhNotification } from '@yh-ui/yh-ui'

const showNotification = () => {
  YhNotification.success('Success', 'This is a success message')
}
</script>

Options API

YH-UI adds the global method $notify to app.config.globalProperties. You can call it using this.$notify in the Options API:

<template>
  <yh-button @click="showNotification">Show Notification</yh-button>
</template>

<script>
export default {
  methods: {
    showNotification() {
      this.$notify.success('Success', 'Operation successful!')
    }
  }
}
</script>

Individual Import

import { YhNotification } from '@yh-ui/yh-ui'

API

Methods

Name	Description	Parameters
YhNotification	Show notification	options
YhNotification.success	Show success notification	(title, message | options)
YhNotification.warning	Show warning notification	(title, message | options)
YhNotification.info	Show info notification	(title, message | options)
YhNotification.error	Show error notification	(title, message | options)
YhNotification.closeAll	Close all notifications	-

Props

Prop	Description	Type	Default
title	Title.	string	undefined
message	Notification content. Supports strings, VNode, and functions returning a VNode.	string | VNode | (() => VNode)	undefined
type	Notification type.	'success' | 'warning' | 'info' | 'error'	undefined
icon	Custom icon prop. Declared in the type, but the current template does not render the prop value itself. Use the icon slot for custom icons.	string | VNode	undefined
showClose	Whether to show close button.	boolean	true
duration	Display duration in milliseconds. Set to 0 to keep the notification open.	number	4500
offset	Offset from the viewport edge.	number	16
position	Popup position.	'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center'	'top-right'
id	Internal id used by the service runtime.	string	undefined
dangerouslyUseHTMLString	Whether to treat message as an HTML snippet.	boolean	false
onClose	Callback when closing.	() => void	undefined
onClick	Callback when clicking the notification root.	() => void	undefined
zIndex	z-index level.	number	undefined
customClass	Custom class name.	string	undefined
max	Maximum count allowed at the same position. When exceeded, the oldest notifications at that position are closed first.	number	undefined
themeOverrides	Component-level theme overrides.	ComponentThemeVars	undefined

Events

Event	Description	Parameters
destroy	Triggered after the leave transition finishes.	() => void
click	Triggered when the notification root is clicked.	() => void

Return Value

Calling YhNotification returns an instance of the current Notification. If you need to manually close the instance, call its close method.

Method	Description
close	Close current Notification

const handler = YhNotification.success('Success', 'Message content')

// Close manually
handler.close()

Slots

Slot Name	Description
default	Custom content area
icon	Custom icon area

Expose

Name	Description	Type
visible	Notification visibility status	Ref<boolean>
close	Close current notification	() => void

Theme Variables

The Notification component currently consumes the following dedicated CSS variables:

Variable	Description	Default
--yh-notification-bg-color	Background color	var(--yh-bg-color-overlay)
--yh-notification-border-color	Border color	var(--yh-border-color-lighter)
--yh-notification-shadow	Shadow	var(--yh-shadow-lg)
--yh-notification-title-color	Title color	var(--yh-text-color-primary)
--yh-notification-content-color	Content text color	var(--yh-text-color-regular)

Type Exports

Name	Description
YhNotificationProps	Props type for the internal notification component
YhNotificationEmits	Emits type for the internal notification component
YhNotificationSlots	Slots type for the internal notification component
YhNotificationExpose	Expose type for the internal notification component
YhNotificationInstance	Public instance type for a single notification
YhNotificationOptions	Service options type for YhNotification(...)
YhNotificationHandler	Returned handler type
YhNotificationContext	Internal runtime context type
YhNotificationFn	Notification function signature type
YhNotificationType	Notification type union
YhNotificationPosition	Notification position union