A vue modal with animations.
Switch branches/tags
Clone or download
Latest commit ed76bbf Dec 5, 2017
Failed to load latest commit information.
build release 2.2.0 Jul 25, 2017
dist release 2.3.3 Dec 5, 2017
example fix onEsc ann onClickMask error Sep 7, 2017
src Update common.css Dec 1, 2017
.babelrc add babelrc Jul 26, 2017
.gitignore add babelrc Jul 26, 2017
.npmignore upd: build Jan 18, 2017
LICENSE Initial commit Jan 16, 2017
README.md fix: closeOnClickMask default value should be true Oct 8, 2017
index.html release 1.0.0 Jan 18, 2017
package.json release 2.3.3 Dec 5, 2017
yarn.lock update dependencies Dec 5, 2017


Vodal Dependency Status NPM downloads

A vue modal with animations. Example


npm i -S vodal


<vodal :show="show" animation="rotate" @hide="show = false">
    <div>A vue modal with animations.</div>
import Vue from 'vue';
import Vodal from 'vodal';

Vue.component(Vodal.name, Vodal);

export default {
  name: 'app',
  data() {
    return {
      show: false
// include animation styles
@import "vodal/common.css";
@import "vodal/rotate.css";


Property Type Default Description
width number 400 width of dialog
height number 240 height of dialog
measure string px measure of width and height
show bool false whether to show dialog
mask bool true whether to show mask
closeButton bool true whether to show close button
closeOnEsc bool false whether close dialog when esc pressed
closeOnClickMask bool true whether close dialog when mask clicked
animation string zoom animation type
duration number 300 animation duration
className string / className for the container
customStyles object / custom dialog styles
customMaskStyles object / custom mask styles


Name Description
hide triggers when dialog will hide
clickMask triggers when mask clicked

Animation Types

  • zoom
  • fade
  • flip
  • door
  • rotate
  • slideUp
  • slideDown
  • slideLeft
  • slideRight


React version