Vue M Message

Common errors

• [Vue warn]: Failed to resolve component: message

  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.
  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')

  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.
  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.

  cause 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`).

Warnings

• breaking Version 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.
• breaking 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.
  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.
• gotcha 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.
  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.

Install

• npm install vue-m-message npm
• yarn add vue-m-message yarn
• pnpm add vue-m-message pnpm

Imports

• Message
  wrong:

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

  correct:

  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
  wrong:

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

  correct:

  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.

Quickstart

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');