Easy Accessible Dialog/Modal For Vue – VEasyDialog

Install & Download:

# Yarn
$ yarn add v-easy-dialog
# NPM
$ npm i v-easy-dialog

Description:

An easy, fast, accessible, animated, and stackable modal dialog component for Vue.js.

Feature List:

• Esc Key to dismiss
• Auto traps focus within Dialog
• Supports scrollable dialog content
• Smooth transitions
• Optional persistent prop for when you require user’s input to proceed
• Fullscreen mode

How to use it:

1. Import and register the component.

import VEasyDialog from 'v-easy-dialog'
export default {
  components: {
    VEasyDialog
  }
}

2. Create a basic modal dialog.

<v-easy-dialog v-model="simpleDialog">
  Dialog Content Here
</v-easy-dialog>
}

3. Available props to config the dialog.

value: { type: Boolean, default: false },
width: { type: String, default: '600px' },
growContent: { type: Boolean, default: true },
maxHeight: { type: String, default: '90%' },
fullscreen: { type: Boolean, default: false },
backgroundBtnTag: { type: String, default: 'button' },
persistent: { type: Boolean, default: false },
backdropClass: { type: undefined },
backdropStyle: { type: undefined },
focusOn: { type: String, default: undefined }

Preview: