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	string | VNode	—
type	Message type	'success' | 'warning' | 'info' | 'error'	'info'
icon	Custom icon	string | VNode	—
show-close	Whether to show close button	boolean	false
duration	Display duration (ms), set to 0 for no auto-close	number	3000
offset	Offset from the top (px)	number	64
dangerously-use-html-string	Whether to treat message as an HTML snippet	boolean	false
center	Whether to center content	boolean	false
on-close	Callback function when closing	() => void	—
z-index	z-index level	number	—
custom-class	Custom class name	string	—
grouping	Whether to support grouping merge	boolean	false
placement	Message placement	'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right'	'top'

Slots

Slot Name	Description
default	Message content (used when the message property is insufficient)
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	Whether the current message is visible	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-box-shadow-light)
--yh-message-text-color	Text color	var(--yh-text-color-primary)
--yh-message-close-color	Close button color	var(--yh-text-color-placeholder)
--yh-message-close-hover-color	Close button hover color	var(--yh-text-color-regular)