@2alheure/vue-modal

Vue.js Modal

A simple Modal component for Vue.js.
This component is compatible with Vue 3.

• Vue.js Modal
  • Installation
  • Usage
    • Simple usage example
    • Props
    • Events

Installation

First, run npm install @2alheure/vue-modal.
Then import it with import Modal from "@2alheure/vue-modal";.

Usage

Simple usage example

<Modal :displayed="isModalDisplayed" @close="isModalDisplayed = false">
  <p>Look at that beautiful modal! =D</p>
</Modal>

<!-- OR -->

<Modal v-model="isModalDisplayed">
  <p>Look at that beautiful modal! =D</p>
</Modal>



<script>
  import Modal from "@2alheure/vue-modal";
  
  export default {
    components: {
      Modal
    },
    data() {
      return {
        isModalDisplayed: true
      };
    }
  }
</script>

Props

Name	Type	Default value	Description
modelValue	Boolean	false	Whether the modal should be displayed or not. This is the prop actually used by the v-model directive. This prop is required.
adaptative	Boolean	false	Whether to let the modal adapt its size to its content or not. If not, the modal will be half the width of the window.
btnClose	Boolean	true	Whether a "close" button should be displayed or not.
escClose	Boolean	true	Whether the modal should close when the "escape" key is pressed or not.
overlayClose	Boolean	true	Whether the modal should close when the user clicks outside its content or not.

Events

Name	Value type	Value	Description
update:modelValue	Boolean	false	Triggered each time the modal should be closed: The cross button or the outside of the modal has been cliked, escape key has been pressed. This is the event used for the v-model directive.
update:modelValue	Boolean	true	Triggered each time the modal is opened.