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	—
message	Notification content	string | VNode | (() => VNode)	—
type	Notification type	'success' | 'warning' | 'info' | 'error'	—
icon	Custom icon	string | VNode	—
showClose	Whether to show close button	boolean	true
duration	Display duration (ms), set to 0 to prevent auto-close	number	4500
offset	Offset from the window edge (px)	number	16
position	Popup position	'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center'	'top-right'
dangerouslyUseHTMLString	Whether to treat message as an HTML snippet	boolean	false
onClose	Callback function when closing	() => void	—
onClick	Callback function when clicking the notification	() => void	—
zIndex	z-index level	number	—
customClass	Custom class name	string	—
max	Limit the number of notifications shown at the same position	number	—

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 use following CSS variables, which can be overridden to customize the style:

Variable	Description	Default
--yh-notification-bg-color	Background color	var(--yh-color-bg-elevated)
--yh-notification-border-color	Border color	var(--yh-border-color-light)
--yh-notification-shadow	Shadow	var(--yh-box-shadow-small)
--yh-notification-title-color	Title color	var(--yh-color-text-primary)
--yh-notification-text-color	Content text color	var(--yh-color-text-secondary)
--yh-notification-close-color	Close button color	var(--yh-color-text-secondary)
--yh-notification-close-hover-color	Close button hover color	var(--yh-color-text-primary)
--yh-notification-icon-size	Icon size	24px
--yh-notification-width	Notification width	330px
--yh-notification-padding	Padding	20px
--yh-notification-radius	Border radius	var(--yh-border-radius-base)