Toast Message Plugin For Vue - m-message

Install & Download:

# Yarn
$ yarn add vue-m-message
# NPM
$ npm install vue-m-message --save

Description:

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
}