Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

v-dialogs · npm version license npm

A simple and clean instructional dialog plugin for Vue2, dialog type including Modal, Alert, Mask and Toast

Examples and Documentation

Explorer on

The jQuery version: bDialog

The Dialog Icon

The icons in alert dialog used are made by Elegant Themes
The control icon, toast icon used are come from IconFont


npm i -S v-dialogs

Include plugin in your main.js file.

import Vue from 'vue'
import Dialog from 'v-dialogs'
Vue.use(Dialog, {
  // global config options...



import Profile from './Profile.vue'

this.$dlg.modal(Profile, {
  width: 400,
  height: 300,
  title: 'User Profile',
  params: {
    userId: 1,
    userName: 'Terry Zeng'
  callback: data => {
    this.$dlg.alert(`Received message: ${data}`)


// alert message
// alert message with callback
this.$dlg.alert('message', () => { // do somthing })
// alert message with options
this.$dlg.alert('message', { ...options })
// alert message with callaback and options
this.$dlg.alert('message', callback, options)


const key = this.$dlg.mask('Data loading, please hold on a moment...')

// do some stuff
job().then(resp => {
  // close mark layer when job done


// show message in corner
// show message with callback
this.$dlg.toast('message', () => { // do somthing })
// show message with options
this.$dlg.toast('message', { ...options })
// show message with callaback and options
this.$dlg.toast('message', callback, options)

Vue plugin series

Plugin Status Description
v-page npm version A simple pagination bar, including length Menu, i18n support
v-dialogs npm version A simple and powerful dialog, including Modal, Alert, Mask and Toast modes
v-tablegrid npm version A simpler to use and practical datatable
v-uploader npm version A Vue2 plugin to make files upload simple and easier,
you can drag files or select file in dialog to upload
v-ztree npm version A simple tree for Vue2, support single or multiple(check) select tree,
and support server side data
v-gallery npm version A Vue2 plugin make browsing images in gallery
v-region npm version A simple region selector, provide Chinese administrative division data
v-selectpage npm version A powerful selector for Vue2, list or table view of pagination,
use tags for multiple selection, i18n and server side resources supports
v-suggest npm version A Vue2 plugin for input suggestions by autocomplete
v-playback npm version A Vue2 plugin to make video play easier
v-selectmenu npm version A simple, easier and highly customized menu solution
You can’t perform that action at this time.