vue-minimal-modal

Accessible modal dialog component for Vue.js

Installation

To install, you can use npm or yarn:

via npm

npm install vue-minimal-modal

via yarn

yarn add vue-minimal-modal

API documentation

Examples

Here is a simple example of vue-minimal-modal.

<script setup lang="js">
import { ref } from 'vue'
import Modal from 'vue-minimal-modal'
import 'vue-minimal-modal/css'; // if necessary

const isOpen = ref(false)

const setIsOpen = (value) => {
  isOpen.value = value
}

const openModal = () => {
  setIsOpen(true)
}

const closeModal = () => {
  setIsOpen(false)
}
</script>

<template>
  <div>
    <button type="button" @click="openModal">Open Modal</button>
    <Modal :isOpen="isOpen" :onClose="closeModal">
      <button type="button" @click="closeModal">Close Modal</button>
      <h2>I am Vue Minimal Modal.</h2>
    </Modal>
  </div>
</template>

Props

name	description	type	default
isOpen	Boolean describing if the modal should be shown or not.	boolean
onClose	Specify a function to close modal.	function
container	Set parent element that the modal will be attached to.	string | HTMLElement	'body'
shouldCloseOnBackdropClick	Boolean indicating if the backdrop should close the modal.	boolean	true
shouldCloseOnEsc	Boolean indicating if pressing the esc key should close the modal.	boolean	true
id	Id attribute to be applied to the modal div.	string
className	Class attribute to be applied to the modal div.	string	'vue-minimal-modal'
backdropClassName	Class attribute to be applied to the backdrop div.	string	'vue-minimal-modal-backdrop'
dialogClassName	Class attribute to be applied to the dialog div.	string	'vue-minimal-modal-dialog'
preventScroll	Boolean indicating if open, prevent scrolling.	boolean	true
closeTimeout	Number indicating the milliseconds to wait before closing the modal.	number	0
role	Role attribute of the modal.	string	'dialog'
ariaModal	Aria Modal attribute of the modal.	boolean | 'false' | 'true'	true
ariaLabelledby	Aria Labelledby attribute of the modal.	string
ariaDescribedby	Aria Describedby attribute of the modal.	string

Events

name	description
afterOpen	When the modal opened.
afterClose	When the modal closed.