Vue-modality NPM

vue-modality

A really nice Vue.js modal component. (compatible with Vue.js 2)

If you are looking for the Vue.js 3 version, visit: vue-modality-v3

Demo

Sandbox

Installation

NPM

$ npm install vue-modality

import Vue from 'vue'
import VueModality from 'vue-modality'

Vue.use(VueModality)

... or register it locally

import VueModality from 'vue-modality'
export default {
  components: {
    VueModality
  }
};

Usage

<vue-modality ref="myRef" title="My Title" centered>
  body content
</vue-modality>

// give your modal a ref and open it by calling:
this.$refs.myRef.open()

// or close it by calling:
this.$refs.myRef.hide()

CDN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-modality</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-modality"></script>
</head>
<body>
    <h1>Vue-Modality</h1>
    <div id="app">
        <button @click="$refs.example.open()">
            Open the modal
        </button>
        <vue-modality ref="example" @ok="$refs.example.hide()" @cancel="$refs.example.hide()" title="Modal" centered>
            Use the footer buttons to close the modal
        </vue-modality>
    </div>

    <script>
        const vueApp = new Vue({el: '#app'});
    </script>
</body>
</html>

Available props

Prop	Type	Default	Description
width	String	400px
centered	Boolean	false	Vertically centered
overlay	Boolean	false
text-center	Boolean	false
title	String	Modal
title-class	String
hide-header	Boolean	false
hide-footer	Boolean	false
ok-title	String	Ok
ok-disabled	Boolean	false
ok-class	String
ok-loading	Boolean	false	Shows the loading icon
hide-ok	Boolean	false	Hides the ok button
cancel-title	String	Cancel
cancel-disabled	Boolean	false
cancel-class	String
hide-cancel	Boolean	false	Hides the cancel button
no-close-on-backdrop	Boolean	false
no-close-on-esc	Boolean	false
error	Boolean	false	Shows error icon
success	Boolean	false	Shows success icon