vue-minimal-modal v0.0.6

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

Events