A message box (like Sweet Alert) for vue.js.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.



vue-msgbox is a message box (like Sweet Alert) for vue.js.


Get source from npm.

$ npm install vue-msgbox --save

Supported UMD library and individual CSS file.

├── vue-msgbox.js
└── vue-msgbox.css
├── index.js
└── msgbox.vue
// For ES6 module
import MessageBox from 'vue-msgbox';

// For commonJS
const MessageBox = require('vue-msgbox').default;

// For global variable, import from script label, then
const MessageBox = VueMsgbox.default;

// Import from src code for debugging or self building
import MessageBox from 'vue-msgbox/src';

And import CSS file:



Basic usage

MessageBox("Good job!", "You clicked the button!", "success");// title, message, type

Or pass an object as options, and second parameter as callback:

  title: 'I\'m a title',
  message: 'I\'m a message',
  type: 'success',
  showCancelButton: true
}, function(action) {
  console.log('callback:', action);
  MessageBox('Clicked: ' + action);

Promise based usage

Basic usage

  title: 'I\'m a title',
  message: 'I\'m a message',
  type: 'success',
  showCancelButton: true
}).then(function(action) {
  console.log('callback:', action);
  MessageBox('Clicked: ' + action);


MessageBox.alert(message, title, options);
MessageBox.alert('message').then(function(action) {


If user press cancel button, then this promise will be rejected.

MessageBox.confirm(message, title, options);
MessageBox.confirm('message').then(function(action) {


If user press cancel button, then this promise will be rejected.

MessageBox.prompt(message, title, options);
MessageBox.prompt('message').then(function(value, action) {


Option Description
title The title of MessageBox.
message The content of MessageBox.
type The status type of MessageBox: success, warning, error
showConfirmButton Boolean(default true) visible of confirm button.
showCancelButton Boolean(default false) visible of cancel button.
confirmButtonText The text of confirm button.
confirmButtonPosition (Default:right) The position of confirm button, default is right.
confirmButtonHighlight (Default:false) Highlight confirm button if confirmButtonHighlight is true.
cancelButtonText The text of cancel button.
cancelButtonHighlight (Default:false) Highlight cancel button if cancelButtonHighlight is true.
confirmButtonClass Extra className of confirm button.
cancelButtonClass Extra className of cancel button.
showInput Boolean(default false) visible of input.
inputValue value of input.
inputPlaceholder placeholder of input.
inputPattern Regexp(default null). validation pattern of input.
inputValidator validate function of input, if validator return a string, MessageBox will use it as inputErrorMessage.
inputErrorMessage error message when inputPattern test inputValue failed.


Coding with watching and hot-reload.

$ npm run dev

Develop on real remote device.

$ npm run remote-dev {{ YOUR IP ADDRESS }}