# How to Display Toast Messages and Notifications Using `$message` and `$notify` in Element UI

> Learn to display toast messages using $message and $notify in Element UI. Access global methods from any Vue component for toasts and system notifications.

- Repository: [饿了么前端/element](https://github.com/ElemeFE/element)
- Tags: how-to-guide
- Published: 2026-03-07

---

**Element UI registers `$message` and `$notify` as global methods on the Vue prototype during installation, allowing any component to show lightweight toasts or rich system notifications with a single method call.**

If you are building Vue applications with the ElemeFE/element component library, you can display toast messages and notifications using `$message` and `$notify` without importing components into every file. These helper methods are injected into every Vue instance during the library's initialization, providing immediate access to stackable, auto-positioning feedback UI.

## How `$message` and `$notify` Are Registered in Element UI

Both utilities become globally available when you install Element UI. In [`src/index.js`](https://github.com/ElemeFE/element/blob/main/src/index.js), the library explicitly attaches the **Message** and **Notification** constructors to `Vue.prototype`:

```javascript
// src/index.js
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

```

This registration pattern means any Vue component can access these methods via `this.$message` or `this.$notify` to trigger toast messages or notification panels from anywhere in your application logic.

## Using `$message` for Toast Notifications

The `$message` helper creates lightweight, self-dismissing feedback toasts that appear at the top center of the viewport. The core implementation resides in [`packages/message/src/main.js`](https://github.com/ElemeFE/element/blob/main/packages/message/src/main.js), which manages instance creation, vertical stacking, and automatic cleanup.

### Basic String Usage

Pass a string directly to show a simple message:

```javascript
this.$message('This is a simple message.');

```

### Typed Message Shortcuts

For semantic coloring, use the type-specific static methods:

```javascript
this.$message.success('Operation successful!');
this.$message.warning('Warning: Check your inputs.');
this.$message.error('Error: Something went wrong.');
this.$message.info('This is an informational note.');

```

### Advanced Configuration

Control duration, closability, and HTML rendering via an options object:

```javascript
this.$message({
  message: '<strong>Saved successfully</strong>',
  type: 'success',
  showClose: true,
  duration: 0,                      // 0 means it stays until manually closed
  dangerouslyUseHTMLString: true    // allows HTML in the message
});

```

Under the hood, each call generates a unique ID (`message_<seed>`), calculates a `verticalOffset` based on existing instances, and appends the toast to `document.body`.

## Using `$notify` for System Notifications

The `$notify` helper produces richer notification cards that support titles, positioning in any corner, and independent stacking per position. The implementation in [`packages/notification/src/main.js`](https://github.com/ElemeFE/element/blob/main/packages/notification/src/main.js) mirrors the Message architecture but adds multi-position support.

### Positioned Notifications

Unlike messages that stack top-center, notifications can appear in four corners:

```javascript
this.$notify({
  title: 'Update Available',
  message: 'Version 2.0 is ready to install.',
  position: 'bottom-left',    // options: top-right, top-left, bottom-right, bottom-left
  type: 'info',
  duration: 8000
});

```

### Notification Shortcuts

Similar to `$message`, you can use typed shortcuts:

```javascript
this.$notify.success({
  title: 'Success',
  message: 'Data saved successfully.'
});

// Or shorthand with just a string
this.$notify.error('Critical failure occurred!');

```

The library maintains separate instance arrays for each `position` value, calculating offsets independently so that `top-right` notifications do not interfere with `bottom-left` stacks.

## Managing the Notification Stack and Lifecycle

Both `$message` and `$notify` manage their own DOM instances through internal `instances` arrays. When you call either method, the utility:

1. Creates a Vue-extended component from the respective `.vue` file
2. Generates a unique ID using an internal seed counter
3. Calculates the `verticalOffset` by summing the heights of existing items plus a default gap (20px for messages, 16px for notifications)
4. Mounts the element to `document.body`

### Programmatic Closing

Each call returns the component instance, allowing manual control:

```javascript
// Show a persistent toast
const toast = this.$message({
  message: 'Processing...',
  duration: 0
});

// Close it programmatically later
toast.close();

```

To dismiss all active notifications globally:

```javascript
Message.closeAll();      // closes all toasts
Notification.closeAll(); // closes all notifications regardless of position

```

The `close(id, userOnClose)` method removes the specific instance from its internal array and triggers a repositioning of remaining items to fill the vertical gap.

## Complete Code Examples

### Basic Vue Component with Toast

```vue
<template>
  <el-button @click="showToast">Show Toast</el-button>
</template>

<script>
export default {
  methods: {
    showToast() {
      this.$message({
        message: 'Changes saved!',
        type: 'success'
      });
    }
  }
}
</script>

```

### Notification with HTML Content

```javascript
this.$notify({
  title: 'Danger',
  message: '<strong>Server Error:</strong> Connection timeout',
  type: 'error',
  dangerouslyUseHTMLString: true,
  position: 'top-left',
  duration: 5000
});

```

### Dynamic Stack Management

```javascript
// Create multiple messages
const msg1 = this.$message({ message: 'First', duration: 0 });
const msg2 = this.$message({ message: 'Second', duration: 0 });

// Close specific one
setTimeout(() => msg1.close(), 2000);

// Or clear everything
setTimeout(() => Message.closeAll(), 5000);

```

## Summary

- **Global Registration**: Element UI attaches `$message` and `$notify` to `Vue.prototype` in [`src/index.js`](https://github.com/ElemeFE/element/blob/main/src/index.js), making them available in every component.
- **Implementation Paths**: Message logic lives in [`packages/message/src/main.js`](https://github.com/ElemeFE/element/blob/main/packages/message/src/main.js); Notification logic resides in [`packages/notification/src/main.js`](https://github.com/ElemeFE/element/blob/main/packages/notification/src/main.js).
- **API Flexibility**: Both helpers accept strings, VNodes, or options objects, and provide shortcut methods for `success`, `warning`, `error`, and `info` types.
- **Stack Management**: Instances track their own IDs and vertical offsets, automatically repositioning remaining items when one closes.
- **Programmatic Control**: Returned instances expose a `close()` method, while `Message.closeAll()` and `Notification.closeAll()` clear entire stacks.

## Frequently Asked Questions

### What is the difference between `$message` and `$notify` in Element UI?

`$message` displays lightweight toast banners that appear at the top center and automatically disappear after a set duration. `$notify` creates richer notification cards that support titles, custom positioning in any screen corner, and typically remain visible longer. Choose `$message` for brief feedback and `$notify` for system-level alerts requiring user attention.

### How do I prevent a toast or notification from closing automatically?

Set the `duration` property to `0` in the options object. This keeps the message or notification visible until the user clicks the close button or you call the instance's `close()` method programmatically. You should also set `showClose: true` to ensure users have a way to dismiss the element.

### Can I use HTML inside Element UI toast messages and notifications?

Yes, both `$message` and `$notify` support HTML content when you set `dangerouslyUseHTMLString: true` in the options object. Pass your HTML string to the `message` property. Be cautious when rendering user-generated content to avoid XSS vulnerabilities.

### How do I position notifications in corners other than the default top-right?

Use the `position` property in the options object passed to `$notify`. Valid values are `'top-right'`, `'top-left'`, `'bottom-right'`, and `'bottom-left'`. Each position maintains its own independent stack, allowing notifications to accumulate separately in different corners of the screen.