{"id":12523,"library":"vue-m-message","title":"Vue M Message","description":"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.","status":"active","version":"4.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/mengdu/m-message","tags":["javascript","vue-m-message","m-message","vue-notification","vue-toast","typescript"],"install":[{"cmd":"npm install vue-m-message","lang":"bash","label":"npm"},{"cmd":"yarn add vue-m-message","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-m-message","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 3 application integration. v4.x requires Vue 3, v3.x requires Vue 2.","package":"vue","optional":false}],"imports":[{"note":"Message is the default export of the plugin. It's imported as a default and then registered with `app.use()`.","wrong":"import { Message } from 'vue-m-message'","symbol":"Message","correct":"import Message from 'vue-m-message'"},{"note":"This import is essential for the default styling of the message components. It should be included once in your application's entry file.","symbol":"CSS","correct":"import 'vue-m-message/dist/style.css'"},{"note":"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.","wrong":"this.$message.info('Your message here')","symbol":"Message.info","correct":"Message.info('Your message here')"},{"note":"For TypeScript users, import types separately to avoid bundling overhead and ensure correct type inference.","symbol":"MessageOptions (Type)","correct":"import type { MessageOptions } from 'vue-m-message'"}],"quickstart":{"code":"import { createApp, h } from 'vue';\nimport Message from 'vue-m-message';\nimport 'vue-m-message/dist/style.css';\n\nconst App = {\n  setup() {\n    const showRichMessage = () => {\n      Message.info(() => h('div', [\n        'Here is a ', \n        h('strong', 'rich content'),\n        ' message for ',\n        h('a', { href: 'https://github.com/mengdu/m-message', target: '_blank' }, 'Vue M Message'),\n        ' plugin. It will stay open until manually closed.'\n      ]), {\n        title: 'Welcome to Vue M Message!',\n        duration: -1, // -1 means it needs to be closed manually\n        iconURL: 'https://avatars.githubusercontent.com/u/11366654?s=40&v=4', // Custom icon\n        closable: true // Allow manual closing\n      });\n    };\n\n    // Display a message shortly after the app mounts\n    setTimeout(showRichMessage, 1000);\n\n    return () => h('div', [\n      h('h1', 'Vue M Message Quickstart'),\n      h('p', 'Check the top-right corner for a message.'),\n      h('button', { onClick: showRichMessage, style: { padding: '10px 20px', fontSize: '16px' } }, 'Show Message Again')\n    ]);\n  }\n};\n\nconst app = createApp(App);\n\n// Install the message plugin globally\napp.use(Message, {\n  name: '$mMessage', // Optional: customize the global property name\n  defaultOptions: { \n    position: 'top-right', \n    zIndex: 2000 \n  }\n});\n\napp.mount('#app');","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Version 4.x of vue-m-message is exclusively compatible with Vue 3. Projects using Vue 2 must install the v3.x series.","severity":"breaking","affected_versions":">=4.0.0"},{"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.","message":"The 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.","severity":"breaking","affected_versions":">=4.0.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=4.0.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"[Vue warn]: Failed to resolve component: message"},{"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.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'info')"},{"fix":"Add `import 'vue-m-message/dist/style.css'` to your application's main entry file (e.g., `main.ts` or `main.js`).","cause":"The required CSS file for `vue-m-message` has not been imported into your project.","error":"Message styles are not applied, messages appear unstyled."}],"ecosystem":"npm"}