Registry / web-framework / vue-m-message

vue-m-message

library4.0.2jsnpmunverified

vue-m-message is a lightweight and configurable message/toast plugin designed specifically for Vue.js applications. The current stable version, v4.0.2, exclusively supports Vue 3, having been fully refactored with TypeScript since v4.0.0. For Vue 2 projects, users must install the v3.x series. It offers various message types (info, success, error, warning, loading), supports custom icons, HTML content, and provides 7 distinct positioning options. It also allows for programmatic closing and setting global default options, differentiating itself through its explicit Vue 3 focus, modern composition API integration, and flexible content rendering, including VNode support, without significant external dependencies.

web-framework

npm install vue-m-message

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-M-MESSAGE

vue-m-message

web-frameworkjavascriptv4.0.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Message

✓ import Message from 'vue-m-message'

✗ import { Message } from 'vue-m-message'

Message is the default export of the plugin. It's imported as a default and then registered with `app.use()`.

CSS

✓ import 'vue-m-message/dist/style.css'

This import is essential for the default styling of the message components. It should be included once in your application's entry file.

Message.info

✓ Message.info('Your message here')

✗ this.$message.info('Your message here')

While `app.use(Message)` might expose it via `app.config.globalProperties` or `this.$message` in Options API, the direct import and call on the `Message` object is the documented and recommended approach for consistency, especially with Composition API.

MessageOptions (Type)

✓ import type { MessageOptions } from 'vue-m-message'

For TypeScript users, import types separately to avoid bundling overhead and ensure correct type inference.

This quickstart demonstrates setting up a basic Vue 3 application, installing `vue-m-message` as a plugin with global default options, importing its styles, and then programmatically displaying a rich, custom-styled info message using Vue's H function.

import { createApp, h } from 'vue'; import Message from 'vue-m-message'; import 'vue-m-message/dist/style.css'; const App = { setup() { const showRichMessage = () => { Message.info(() => h('div', [ 'Here is a ', h('strong', 'rich content'), ' message for ', h('a', { href: 'https://github.com/mengdu/m-message', target: '_blank' }, 'Vue M Message'), ' plugin. It will stay open until manually closed.' ]), { title: 'Welcome to Vue M Message!', duration: -1, // -1 means it needs to be closed manually iconURL: 'https://avatars.githubusercontent.com/u/11366654?s=40&v=4', // Custom icon closable: true // Allow manual closing }); }; // Display a message shortly after the app mounts setTimeout(showRichMessage, 1000); return () => h('div', [ h('h1', 'Vue M Message Quickstart'), h('p', 'Check the top-right corner for a message.'), h('button', { onClick: showRichMessage, style: { padding: '10px 20px', fontSize: '16px' } }, 'Show Message Again') ]); } }; const app = createApp(App); // Install the message plugin globally app.use(Message, { name: '$mMessage', // Optional: customize the global property name defaultOptions: { position: 'top-right', zIndex: 2000 } }); app.mount('#app');

Debug

Known issues

breakingVersion 4.x of vue-m-message is exclusively compatible with Vue 3. Projects using Vue 2 must install the v3.x series.

fix

For Vue 2 projects, install `npm install vue-m-message@3`. For Vue 3 projects, ensure your Vue environment is correctly configured for Vue 3.

affects: >=4.0.0

breakingThe library was fully refactored with TypeScript starting from v4.0.0. While providing better type safety, this might introduce minor type-related changes or require stricter type adherence in consuming TypeScript applications.

fix

Review type definitions and adapt your TypeScript code as necessary to align with the new type signatures. Ensure your project's `tsconfig.json` is configured appropriately for Vue 3 and TypeScript.

affects: >=4.0.0

gotchaThe functionality of the `closable` and `duration` attributes was modified in version 4.0.1. Specifically, `duration: -1` now ensures a message remains open indefinitely until manually closed (if `closable` is true), and `closable` enables the close button.

fix

If experiencing unexpected behavior with message closing or duration, explicitly set `duration: -1` for persistent messages and `closable: true` to enable the close button. Refer to the v4.x documentation for the latest attribute behaviors.

affects: >=4.0.1

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: message

This typically occurs when attempting to use vue-m-message v4.x with a Vue 2 project, or if the `Message` plugin has not been correctly registered with `app.use()` in a Vue 3 project.

fix

If using Vue 2, downgrade to `npm install vue-m-message@3`. If using Vue 3, ensure you have called `app.use(Message)` in your main application entry point before mounting the app.

TypeError: Cannot read properties of undefined (reading 'info')

The `Message` object or its static methods (like `info`, `success`) are being called before the `vue-m-message` plugin has been imported or initialized, or the `Message` object is not correctly referenced.

fix

Verify that `import Message from 'vue-m-message'` is present and correct, and that `app.use(Message)` has been executed before any calls to `Message.info()` or other methods. Ensure you are calling `Message.info()` directly, not `this.$message.info()` unless you've configured a global property.

Message styles are not applied, messages appear unstyled.

The required CSS file for `vue-m-message` has not been imported into your project.

fix

Add `import 'vue-m-message/dist/style.css'` to your application's main entry file (e.g., `main.ts` or `main.js`).

Upgrade

Version history

4.0.2latest on npm

Audit

Dependencies

vuerequiredPeer dependency for Vue 3 application integration. v4.x requires Vue 3, v3.x requires Vue 2.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/mengdu/m-message ↗

packagehttps://www.npmjs.com/package/vue-m-message ↗

homepagehttps://mengdu.github.io/m-message/index.html ↗