Dynamic And Custom Modal Component For Vue – xmodal

Install & Download:

# Yarn
$ yarn add xmodal-vue
# NPM
$ npm i xmodal-vue

Description:

xmodal is a customizable and dynamic modal component for Vue apps.

How to use it:

1. Import the xmodal.

import Vue from "vue";
import xmodal from "xmodal-vue";

2. Register the component.

export default {
  data() {
    return {
        ismodalOpen: false,
        // basic modal options
        options: {
            component: modal,
            backgroundColor: "#000000",
            opacity: "0.7",
            animation: "scaleLeft",
        },
    };
  }
};

3. Create a button to toggle the modal.

<template>
  <div id="app">
    <h1>xmodal</h1>
    <button @click="ismodalOpen = !ismodalOpen">open modal</button>
    <xmodal v-model="ismodalOpen" :params="options" />
  </div>
</template>

4. Add your own content to the modal.

// modal.vue
<template>
  <div class="modal">
    <h1>Modal Content</h1>
  </div>
</template>

5. Apply CSS styles to the modal.

.modal {
  width: 300px;
  height: 300px;
  background: white;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

6. All default props & options.

//GLOBAL
component: {
  default: null
},
// MODAL OPTIONS
backgroundColor: {
  type: String,
  default: "#000000"
},
opacity: {
  type: String,
  default: "0.7"
},
hasTimer: {
  default: false
},
animation: {
  type: String,
  default: "fade"
},
isDisable: {
  type: Boolean,
  default: false
},
// COMPONENT OPTIONS
props: {
  type: Object,
  default: null
}

Preview: