vue-modality

A really nice Vue.js modal component. (Compatible with Vue.js 2) If you are looking for the Vue.js 3 version, go to vue-modality-v3
Check GitHub to see all the props and events

Examples

Hi, there! I'm a basic modal with no footer Use the footer buttons to close the modal Oh! Something went wrong! That was a success ;) Click on the OK button Now you can't exit the modal by hiting ESC or clicking outside the box

Basic modal

<vue-modality ref="myRef" title="Modal" hide-footer centered>
  Hi, there! I'm a basic modal with no footer
</vue-modality>

Footer

<vue-modality ref="myRef" @ok="$refs.myRef.hide()" @cancel="$refs.myRef.hide()" title="Modal" centered>
  Use the footer buttons to close the modal
</vue-modality>

Error icon

<vue-modality ref="myRef" error title="Error" centered  @ok="$refs.myRef.hide()" @cancel="$refs.myRef.hide()">
  Oh! Something went wrong!
</vue-modality>

Success icon

<vue-modality ref="myRef" success title="Success" centered  @ok="$refs.myRef.hide()" @cancel="$refs.myRef.hide()">
  That was a success ;)
</vue-modality>

Loading

<vue-modality ref="myRef" :ok-loading="loading" @ok="okHandle()" title="Loading" centered @cancel="$refs.success.hide()">
  Click on the OK button
</vue-modality>

No close on backdrop

<vue-modality ref="myRef" no-close-on-backdrop no-close-on-esc hide-cancel title="Use the button" centered  @ok="$refs.myRef.hide()" @cancel="$refs.myRef.hide()">
  Now you can't exit the modal by hiting ESC or clicking outside the box
</vue-modality>

Installation

npm install vue-modality
// you can register it globally in the main.js
import Vue from 'vue'
import VueModality from 'vue-modality'

Vue.use(VueModality)
// or you can register it locally inside your component
import VueModality from 'vue-modality'
export default {
  components: {
    VueModality
  }
}