Message

Used for feedback hints after active operations. The difference from Notification is that the latter is used more for passive reminders of system-level notifications.

Basic Usage

Appears from the top and disappears automatically after 3 seconds.

Basic Usage

Different States

Used to display operational feedback such as "Success, Warning, Info, Error".

Different States

Closable

A close button can be added. By default, Message cannot be closed manually. If you need a manually closable Message, use the showClose property. Also, setting duration to 0 can prevent the message from closing automatically.

Closable

Centered Text

Use the center property to horizontally center the text.

Centered Text

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

Grouping

Set grouping to true, and message units with the same content will be merged.

Grouping

Placement

Set the placement property to control where the message appears.

Placement

Use in Nuxt

The Message component fully supports Nuxt 3/4 environments. As a functional directive component, it automatically performs environment detection during SSR (Server-Side Rendering) to ensure that the message popup logic is only executed on the web browser side.

Use in Nuxt

SSR Notes:

• ✅ Safe Calling: Calling functions directly in templates or at the top level of setup is safe, as window detection is handled internally.
• ✅ Auto-import: In Nuxt projects, the YhMessage function and its alias callers are automatically imported without manual import.
• ⚠️ Server Constraints: Calling message hints during Nuxt's asyncData or fetch server execution phase is ineffective (since there is no DOM container).
• 💡 Style Consistency: Message styles will be loaded asynchronously along with the CSS, ensuring that the visual style after first-screen hydration is highly unified with the SSR page.

Error Catching Suggestion

In Nuxt's useFetch interceptors or onError hooks, you can directly use YhMessage.error to provide users with friendly server-side error message hints.

Call Signature

YhMessage 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="showMessage">Show Message</yh-button>
</template>

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

const showMessage = () => {
  YhMessage.success('This is a success message')
}
</script>

Options API

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

<template>
  <yh-button @click="showMessage">Show Message</yh-button>
</template>

<script>
export default {
  methods: {
    showMessage() {
      this.$message.success('This is a success message')
    }
  }
}
</script>

Individual Import

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

API

Methods

Name	Description	Parameters
YhMessage	Show message	options | string
YhMessage.success	Show success message	options | string
YhMessage.warning	Show warning message	options | string
YhMessage.info	Show info message	options | string
YhMessage.error	Show error message	options | string
YhMessage.closeAll	Close all messages	-

Props

Prop	Description	Type	Default
message	Message content. The current template renders prop content as plain text or HTML only, so prop-based VNode content is declared in the type but is not rendered as a vnode by the current implementation.	string | VNode	undefined
type	Message type.	'success' | 'warning' | 'info' | 'error'	'info'
icon	Custom icon prop. Declared in the type, but the current implementation does not consume it. Use the icon slot for custom icons.	string | VNode	undefined
show-close	Whether to show the close button.	boolean	false
duration	Display duration in milliseconds. Set to 0 to keep the message open until manually closed.	number	3000
offset	Offset used by the component instance. In the service API, omitted top placements start from 64 and bottom placements start from 20.	number	20
id	Internal id used by the service runtime.	string	undefined
dangerously-use-html-string	Whether to render message as HTML.	boolean	false
center	Whether to center the content text.	boolean	false
on-close	Callback invoked when the message closes.	() => void	undefined
z-index	Custom z-index.	number	undefined
custom-class	Extra class name.	string	undefined
grouping	Merge messages with the same message and type.	boolean	false
repeat-num	Runtime repeat count used by grouped messages. This is maintained by the service implementation.	number	undefined
placement	Message placement.	'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right'	'top'
theme-overrides	Component-level theme override variables.	ComponentThemeVars	undefined

Events

Event	Description	Parameters
destroy	Triggered after the leave transition finishes.	() => void

Slots

Slot Name	Description
default	Custom message content for component usage.
icon	Custom icon content.

Expose

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

Name	Description	Type
close	Close current Message.	() => void
visible	Current visibility state.	Ref<boolean>

Theme Variables

Variable	Description	Default
--yh-message-bg-color	Background color	var(--yh-bg-color-overlay)
--yh-message-border-color	Border color	var(--yh-border-color-lighter)
--yh-message-shadow	Message box shadow	var(--yh-shadow-lg)
--yh-message-text-color	Text color	var(--yh-text-color-primary)
--yh-message-close-color	Close button color	var(--yh-text-color-secondary)
--yh-message-close-hover-color	Close button hover color	var(--yh-text-color-primary)

Type Exports

Name	Description
YhMessageProps	Props type for the internal message component
YhMessageEmits	Emits type for the internal message component
YhMessageSlots	Slots type for the internal message component
YhMessageExpose	Expose type for the internal message component
YhMessageInstance	Public instance type for a single message
YhMessageOptions	Service options type for YhMessage(...)
YhMessageHandler	Returned handler type
YhMessageContext	Internal runtime context type
YhMessageFn	Message function signature type
YhMessageType	Message type union
YhMessagePlacement	Message placement union