# vue-m-message

> A message plugin base on Vue

Latest version **4.0.2** (published 2023-02-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-m-message
pnpm add vue-m-message
yarn add vue-m-message
bun add vue-m-message
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.2 |
| Published | 2023-02-09 |
| First published | 2018-08-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 38.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 173 |
| Author | Lanyue |
| Maintainers | lanyue |
| Keywords | vue-m-message, m-message, vue-notification, vue-toast |

## Links

- npm: https://www.npmjs.com/package/vue-m-message
- Repository: https://github.com/mengdu/m-message
- Homepage: https://mengdu.github.io/m-message/index.html
- Issues: https://github.com/mengdu/m-message/issues
- npm.io page: https://npm.io/package/vue-m-message

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 4.0.2 (latest) — 2023-02-09
- 4.0.1 — 2022-05-09
- 4.0.0 — 2022-05-08
- 3.1.0 — 2021-01-09
- 3.0.0 — 2020-01-20
- 2.0.0 — 2019-07-22
- 1.1.1 — 2019-04-07
- 1.1.0 — 2019-04-03
- 1.0.0 — 2018-08-06

## README

# vue-m-message

A message plugin base on Vue.

> v4.x version only supports Vue 3; If you use Vue 2, use v3.x instead.

![Preview](./preview.png)

[中文](README-zh.md) | [Live Demo](https://mengdu.github.io/m-message/index.html)

```bash
npm install vue-m-message

# Vue 2
# npm install vue-m-message@3
```

```js
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)
// or
app.use(Message, options: { name?: string, defaultOptions?: MessageTypeOptions })

// Message.info('Wellcome here !', { duration: -1, ctx: instance?.appContext })
// Message.info(h('m-demo', 'Wellcome here !'), { duration: -1 })
Message.info(() => h('div', [
  'Here is playground for ',
  h('a', { href: 'https://github.com/mengdu/m-message' },'Vue Message'),
  ' plugin.'
]), {
  title: 'Wellcome here !',
  duration: -1,
  iconURL: 'https://avatars.githubusercontent.com/u/11366654?s=40&v=4'
})
// Message.info(<m-demo>Wellcome here !</m-demo>, { duration: -1 })
// Message.info(() => <m-demo>Wellcome here !</m-demo>, { duration: -1 })

app.mount('#app')
```

## Message API

+ `Message(options: MessageOptions): MessageIntance` General prompt information
+ `Message.info(message: string | VNode | (() => VNode), options?: MessageTypeOptions): MessageIntance` Info prompt information
+ `Message.success(message: string | VNode | (() => VNode), options?: MessageTypeOptions): MessageIntance` Success prompt information
+ `Message.error(message: string | VNode | (() => VNode), options?: MessageTypeOptions): MessageIntance` Error prompt information
+ `Message.warning(message: string | VNode | (() => VNode), options?: MessageTypeOptions): MessageIntance` Warning prompt information
+ `Message.loading(message: string | VNode | (() => VNode), options?: MessageTypeOptions): MessageIntance` Loading prompt information
+ `Message.closeAll(): void` Clear all prompts
+ `Message.setDefault(options: MessageTypeOptions): void` Set default values


```ts
type MessageTypeOptions = Omit<MessageOptions, 'type' | 'message'>

interface MessageIntance {
  id: string
  close: () => void
}
```

### MessageOptions

| Attribute      | Description    | Type      | Optional value       | Default   |
|---------- |-------- |---------- |-------------  |-------- |
| type   |  Message type icon  | string | '', 'info', 'success', 'error', 'warning', 'loading'  |   'info'   |
| iconURL   | Replace type icon with picture | string | —  |   —   |
| title   | Message title | string | —  |    ''   |
| message   | Message content | string | —  |    ''   |
| position   | Message display position | string | 'top-left', 'top-center', 'top-right', 'center', 'bottom-left', 'bottom-center', 'bottom-right' |
| duration   | Message display duration, in MS; When ` - 1 ', it needs to be closed manually | number | —  |   3000   |
| width   | Message block width, auto width by default | string | —  |  ''  |
| className   | class name  | string | — |  — |
| wrapperClassName   | class name for wrapper | string | — |  — |
| zIndex   | z-index  | number | —  |   1010   |
| supportHTML   | Whether the message content supports HTML (only valid when the message is a string) | boolean | true/false | false |
| isCollapsed   | Collapse content  | boolean | true/false |   false   |
| collapsable   | Collapsable | boolean | true/false |   false   |
| closable  | Whether it can be closed | boolean | true/false |  false   |
| hasMask   | Does it contain a mask | boolean | true/false |  false   |
| stopTimerOnHover   | Whether to recalculate the display duration when the mouse moves over | boolean | true/false |  true   |
| onClose   | Close callback | () => void | —  |    —   |
| onCollapsed   | Fold switch callback | (collapsed: boolean) => void | —  |   —   |

## License

Licensed as [MIT](./LICENSE).

---
_Source: https://npm.io/package/vue-m-message · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._