Toast Message Plugin For Vue – m-message

m-message is a small Vue.js 3 plugin to display toast-like info/success/warning/error/loading messages on the applications.

How to use it:

1. Import and register the m-message plugin.

import { createApp, h } from 'vue'
import Message from 'vue-m-message'
import 'vue-m-message/dist/style.css'
import App from './App.vue'
const app = createApp(App)
app.use(Message,{
  // options here
})
app.mount('#app')

2. Create toast messages with the following methods.

// Info
Message.info(message: string | VNode | (() => VNode), options?: MessageTypeOptions): MessageIntance

// Success
Message.success(message: string | VNode | (() => VNode), options?: MessageTypeOptions): MessageIntance

// Error
Message.error(message: string | VNode | (() => VNode), options?: MessageTypeOptions): MessageIntance

// Warning
Message.warning(message: string | VNode | (() => VNode), options?: MessageTypeOptions): MessageIntance

// Loading indicator
Message.loading(message: string | VNode | (() => VNode), options?: MessageTypeOptions): MessageIntance

3. Close all toast messages.

Message.closeAll(): void

4.  Available options.

id: String,
type: {
  type: String,
  default: 'info'
},
title: String,
message: String,
iconURL: String,
duration: {
  type: Number,
  default: 3000
},
isCollapsed: Boolean,
collapsable: Boolean,
supportHTML: Boolean,
width: String,
className: String,
wrapperClassName: String,
closable: Boolean,
stopTimerOnHover: {
  type: Boolean,
  default: true
}

Preview:

Toast Message Plugin For Vue - m-message-min

Changelog:

v4.0.1 (05/09/2022)

  • Update

v4.0.0 (05/07/2022)

  • Supports Vue 3

Download Details:

Author: mengdu

Live Demo: https://mengdu.github.io/m-message/index.html

Download Link: https://github.com/mengdu/m-message/archive/master.zip

Official Website: https://github.com/mengdu/m-message

Install & Download:

# Yarn
$ yarn add vue-m-message

# NPM
$ npm install vue-m-message --save
Tags:

Add Comment