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. |