Vodal: Vue.js modals with animations

vodal modals

Vodal is providing modals for your apps with many animation styles. It is based on a React project, with similar functionality though easier implementation.

Example

Installation

npm i vodal --save

Usage

import Vodal from 'vodal'
import 'vodal/fade.css'
import 'vodal/rotate.css'
// selected styles

Vue.component(Vodal.name, Vodal)

Set the props to adjust the modal

data () {
    return {
        width: 600,
        height: 350,
        show: false
    }
},

Bind the props to the vodal component

<vodal :show="show" animation="rotate" :width="width" :height="height" @hide="show = false">
    <h4>A vue modal with animations.</h4>
    <button class="vodal-confirm-btn" @click="show = false">ok</button>
    <button class="vodal-cancel-btn" @click="show = false">close</button>
</vodal>

You can see modals with different animations on the Demo page and the code is available on GitHub.