MessageBox

A message dialog mimicking the native system experience, integrated with YH-UI's signature acrylic visual language, GPU-accelerated drag interactions, and rigorous business lifecycle control.

Basic Usage

Provides three common interaction modes: alert, confirm, and prompt.

Alert

Confirm Dialog

Prompt

Different States

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

Success State

Warning State

Error State

Info State

Custom Content

The message property supports passing HTML strings or VNodes.

VNode Rendering

Using HTML Snippet

Warning

While dangerouslyUseHTMLString is convenient, it can easily lead to XSS attacks. Ensure the content of message is trusted. Never assign user-submitted content to the message property.

Vision and Layout

YH-UI flagship features, providing frosted glass texture, drag positioning, and full axis alignment.

Center Layout

Draggable

Asynchronous Close Interception

The beforeClose hook can precisely intercept exit actions. It is commonly used for handling async API logic, with the component automatically maintaining the confirm button's loading state.

Async Interception

Loading State

By using the confirmButtonLoading property or manually setting instance.confirmLoading = true in the beforeClose hook, you can display a loading animation directly on the confirm button. The component automatically handles button disabling.

Async Loading Demo

Global Default Configuration

If most popups in your application share consistent visual preferences (e.g., globally enabling the acrylic effect), you can use setDefaults for one-click global configuration to avoid repetitive parameter passing.

Global Configuration Demo

Use in Nuxt

YhMessageBox fully supports Nuxt 3/4. As a directive-called component, it automatically detects the environment during SSR (Server-Side Rendering) to ensure popup logic only executes on the client.

Nuxt Usage Demo

Notes:

• ✅ Full Auto Import: In Nuxt projects, YhMessageBox and its alias functions are automatically mapped without explicit import.
• ✅ SSR Safe: process.client detection is encapsulated inside the functions, so you can safely call them in lifecycles or methods.
• 💡 Style Sync: Component styles are automatically injected via Nuxt plugins, ensuring visual continuity after the first screen is hydrated.

Production Practice

In the Nuxt ecosystem, it is recommended to use YhMessageBox in defineNuxtComponent or setup logic for business interception, achieving an excellent global error alert experience when combined with useFetch interceptors.

Global Methods

If you have fully imported YH-UI, it adds the following global methods to app.config.globalProperties: $msgbox, $alert, $confirm, and $prompt. Thus, you can call MessageBox using the methods shown on this page in a Vue instance.

• $msgbox(options)
• $alert(message, title, options) or $alert(message, options)
• $confirm(message, title, options) or $confirm(message, options)
• $prompt(message, title, options) or $prompt(message, options)

Application Context Inheritance

Now MessageBox accepts the constructor's context as the second parameter (if you are using MessageBox variables). This parameter allows you to inject the current application context into the message, inheriting all application properties.

import { getCurrentInstance } from 'vue'
import { YhMessageBox } from '@yh-ui/yh-ui'

// In your setup method
const { appContext } = getCurrentInstance()!
// Pass parameters like this:
YhMessageBox({}, appContext)
// Or use different calling methods:
YhMessageBox.alert('Hello world!', 'Title', {}, appContext)

API

Methods

Method	Description	Parameter Type	Return Value
alert	Pops up an alert message box	(message, title?, options?, appContext?)	Promise<void>
confirm	Pops up an operation confirmation box	(message, title?, options?, appContext?)	Promise<MessageBoxAction>
prompt	Pops up a content input box	(message, title?, options?, appContext?)	Promise<{ value, action }>
setDefaults	Modifies global default configuration items	(defaults: MessageBoxOptions)	—

MessageBoxOptions

Prop	Description	Type	Default
title	Title	string	Tip
message	Content	string | VNode | (() => VNode)	—
type	Popup type	'alert' | 'confirm' | 'prompt'	—
iconType	State icon type	'success' | 'warning' | 'info' | 'error'	—
icon	Custom icon	string | Component | VNode	—
width	Popup width	string | number	420
dangerouslyUseHTMLString	Whether to render message as HTML	boolean	false
showClose	Whether to show close button at top-right	boolean	true
showConfirmButton	Whether to show confirm button	boolean	true
showCancelButton	Whether to show cancel button	boolean	true
confirmButtonText	Confirm button text	string	OK
cancelButtonText	Cancel button text	string	Cancel
closeOnClickModal	Whether to close when clicking the overlay	boolean	true
closeOnPressEscape	Whether to close when pressing ESC	boolean	true
lockScroll	Whether to lock scrollbar	boolean	true
glass	Whether to enable acrylic glass mode	boolean	false
center	Whether to center content layout	boolean	false
roundButton	Whether to use rounded buttons	boolean	false
draggable	Whether popup is draggable	boolean	false
draggableBoundary	Whether to prevent dragging out of viewport	boolean	true
customClass	Custom class name	string	—
inputPlaceholder	Input placeholder (prompt only)	string	—
inputValue	Initial input value (prompt only)	string	—
inputPattern	Input validation regex (prompt only)	RegExp	—
inputValidator	Custom input validation function (prompt only)	(value: string) => boolean | string	—
inputErrorMessage	Validation error message (prompt only)	string	—
beforeClose	Hook before closing	(action, instance, done) => void	—
callback	Callback after closing	(action, instance) => void	—
appContext	Application context (Vue Context)	AppContext	—
autofocus	Whether to autofocus on opening	boolean	true
appendTo	Sets the root element for the component	string | HTMLElement	document.body
confirmButtonLoading	Whether confirm button shows loading status	boolean	false
cancelButtonLoading	Whether cancel button shows loading status	boolean	false
loadingIcon	Custom loading icon	string | Component | VNode	—

MessageBoxInstance (instance in beforeClose)

Prop/Method	Description	Type
confirmLoading	Loading state of the confirm button	boolean
cancelLoading	Loading state of the cancel button	boolean
open	Opens the popup	(options: MessageBoxOptions) => void
close	Closes the popup	() => void

Theme Variables

Variable	Description	Default
--yh-scrollbar-width	Scrollbar width of the current system (auto-injected)	—
--yh-bg-color-overlay	Popup background color	var(--yh-bg-color-overlay)
--yh-text-color-primary	Title color	var(--yh-text-color-primary)