Create Custom and Dynamic Modals Component | Xmodal-Vue

Xmodal-Vue is a simplified, lightweight (5KB compressed), and an easy-to-use wrapper around your components that will help you create custom, dynamic, models from your components.

vue js modal popup example, vue js modal documentation, bootstrap 5 modal component, vue open modal from another component, v modal vue

iOS Style Modal Dialog Web and Mobile Component | pure-dialog

How to make use of it:

Install and download:

# Yarn
$ yarn add xmodal-vue

$ npm i xmodal-vue

1. Import xmodal file.

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.

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

4. Add your own content to the modal.

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

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 options and props are default.

component: {
  default: null
backgroundColor: {
  type: String,
  default: "#000000"
opacity: {
  type: String,
  default: "0.7"
hasTimer: {
  default: false
animation: {
  type: String,
  default: "fade"
isDisable: {
  type: Boolean,
  default: false
props: {
  type: Object,
  default: null

Dynamic And Custom Modal Component, Xmodal-Vue Plugin/Github

See Demo And Download

Official Website(mediv0): Click Here

This superior jQuery/javascript plugin is developed by mediv0. For extra Advanced Usage, please go to the official website.