El Message

Element Plus Message Component

Displays a global message as feedback in response to user operations.

When to Invoke

Invoke this skill when:

• User needs to show feedback messages
• User wants to display success/error notifications
• User needs closable messages
• User wants to customize message content
• User asks about message positioning

Features

• Multiple Types: success, warning, info, error
• Closable: Manual or auto-close
• Customizable Duration: Configurable display time
• HTML Content: Support for HTML strings
• Custom Icons: Custom icon support
• Multiple Placement: Top, bottom, left, right positions
• Grouping: Merge similar messages
• VNode Support: Render Vue components as content

API Reference

Message Options

| Name | Description | Type | Default | |------|-------------|------|---------| | message | message text | string \| VNode \| Function | '' | | type | message type | 'primary' \| 'success' \| 'warning' \| 'info' \| 'error' | info | | icon | custom icon component | string \| Component | — | | dangerouslyUseHTMLString | whether message is HTML | boolean | false | | customClass | custom class name | string | '' | | duration | display duration (ms), 0 = no auto close | number | 3000 | | showClose | whether to show close button | boolean | false | | center | whether to center the text | boolean | false | | onClose | callback when closed | () => void | — | | offset | distance to viewport edge | number | 16 | | appendTo | which element the message appends to | string \| HTMLElement | — | | grouping | merge messages with same content | boolean | false | | placement | message placement | 'top' \| 'top-left' \| 'top-right' \| 'bottom' \| 'bottom-left' \| 'bottom-right' | top |

Message Methods

| Method | Description | Parameters | Return | |--------|-------------|------------|--------| | ElMessage | Show a message | options | Message instance | | ElMessage.success | Show success message | message \| options | Message instance | | ElMessage.warning | Show warning message | message \| options | Message instance | | ElMessage.info | Show info message | message \| options | Message instance | | ElMessage.error | Show error message | message \| options | Message instance | | ElMessage.closeAll | Close all messages | — | — |

Message Instance

| Method | Description | Type | |--------|-------------|------| | close | Close the message | () => void |

Usage Examples

Basic Usage

  Show Message

import { ElMessage } from 'element-plus'

const open = () => {
  ElMessage('This is a message.')
}

Different Types

  Success
  Warning
  Info
  Error

import { ElMessage } from 'element-plus'

const openSuccess = () => {
  ElMessage.success('Success message')
}

const openWarning = () => {
  ElMessage.warning('Warning message')
}

const openInfo = () => {
  ElMessage.info('Info message')
}

const openError = () => {
  ElMessage.error('Error message')
}

Closable Message

  Show Closable Message

import { ElMessage } from 'element-plus'

const open = () => {
  ElMessage({
    showClose: true,
    message: 'This is a closable message.',
    type: 'success'
  })
}

Custom Duration

  Show Message (5s)

import { ElMessage } from 'element-plus'

const open = () => {
  ElMessage({
    message: 'This message will close after 5 seconds.',
    duration: 5000
  })
}

Centered Text

  Centered Message

import { ElMessage } from 'element-plus'

const open = () => {
  ElMessage({
    message: 'Centered text',
    center: true
  })
}

HTML Content

  HTML Message

import { ElMessage } from 'element-plus'

const open = () => {
  ElMessage({
    dangerouslyUseHTMLString: true,
    message: 'This is HTML content'
  })
}

Custom Icon

  Custom Icon

import { ElMessage } from 'element-plus'
import { SuccessFilled } from '@element-plus/icons-vue'

const open = () => {
  ElMessage({
    message: 'Custom icon message',
    icon: SuccessFilled
  })
}

Custom Offset

  Offset Message

import { ElMessage } from 'element-plus'

const open = () => {
  ElMessage({
    message: 'This message has offset 100px',
    offset: 100
  })
}

Different Placements

  Top
  Top Left
  Top Right
  Bottom

import { ElMessage } from 'element-plus'

const openTop = () => {
  ElMessage({ message: 'Top message', placement: 'top' })
}

const openTopLeft = () => {
  ElMessage({ message: 'Top left message', placement: 'top-left' })
}

const openTopRight = () => {
  ElMessage({ message: 'Top right message', placement: 'top-right' })
}

const openBottom = () => {
  ElMessage({ message: 'Bottom message', placement: 'bottom' })
}

Grouping Messages

  Grouping

import { ElMessage } from 'element-plus'

const open = () => {
  ElMessage({
    message: 'This message will be grouped',
    grouping: true
  })
}
// Clicking multiple times will only show one message
}

VNode Content

  VNode Message

import { ElMessage, h } from 'element-plus'

const open = () => {
  ElMessage({
    message: h('p', null, [
      h('span', null, 'Message can be '),
      h('i', { style: 'color: teal' }, 'VNode')
    ])
  })
}

Close All Messages

  Show Multiple
  Close All

import { ElMessage } from 'element-plus'

const open = () => {
  ElMessage.success('Message 1')
  ElMessage.warning('Message 2')
  ElMessage.info('Message 3')
}

const closeAll = () => {
  ElMessage.closeAll()
}

Using Instance

  Show Message
  Close Message

import { ElMessage } from 'element-plus'

let messageInstance = null

const open = () => {
  messageInstance = ElMessage({
    message: 'This message will be closed programmatically',
    duration: 0  // No auto close
  })
}

const close = () => {
  if (messageInstance) {
    messageInstance.close()
    messageInstance = null
  }
}

With Async Operation

  Save

import { ElMessage } from 'element-plus'

const saveData = async () => {
  const loading = ElMessage({
    message: 'Saving...',
    duration: 0
  })
  
  try {
    await api.save()
    loading.close()
    ElMessage.success('Saved successfully!')
  } catch (error) {
    loading.close()
    ElMessage.error('Save failed!')
  }
}

Form Validation Feedback

  
    
      
    
    Submit
  

import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref()
const form = reactive({ email: '' })

const submit = async () => {
  try {
    await formRef.value.validate()
    await api.submit(form)
    ElMessage.success('Form submitted successfully!')
  } catch (error) {
    ElMessage.error('Please check the form for errors')
  }
}

Common Issues

1. Message Not Showing

Ensure Element Plus styles are imported:

import 'element-plus/dist/index.css'

2. Multiple Messages Stacking

Use grouping: true to merge similar messages:

ElMessage({ message: 'Same message', grouping: true })

3. Message Not Closing

Check duration setting. Use duration: 0 for manual close:

const msg = ElMessage({ message: 'Manual close', duration: 0 })
// Later
msg.close()

Best Practices

1. Use appropriate types: Use success, warning, error, info appropriately
2. Keep messages short: Messages should be concise and clear
3. Use grouping: Enable grouping for repeated operations
4. Handle async operations: Show loading message during async operations
5. Close programmatically: Use instance close() for manual control
6. Avoid HTML: Prefer VNode over HTML strings for security

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.