Press "Enter" to skip to content

Flexible Modal Component of Vue with the Ability to Asynchronous Lazy Loading

vue-async-modal is a flexible conditional component of Vue with the ability to asynchronous lazy loading.

vue js modal example, vue open modal from another component, vue js open modal programmatically, vue open modal from method, vue bootstrap modal

How to make use of it:

Install & Download:

# Yarn
yarn add vue-async-modal

# NPM
$ npm install vue-async-modal

1. You have to add a modal component to your template.

<template>
  <div id="app">
    <modal />
  </div>
</template>
<script>
import { Modal } from 'vue-async-modal'

export default {
  components: {
    Modal,
  },
}
</script>

2. Then, you will be able to get the conditional instance via this. $modal in every Vue component.

// Demo.vue
<template>
  <button @click="loadMyModal"></button>
</template>
<script>
export default {
  methods: {
    loadMyModal() {
      this.$modal.open({
        id: 'my-modal',
        component: import('./MyModal.vue'),
        options: {
          destroy: true,
        },
        props: {
          whatever,
        },
      })
    },
  },
}
</script>

Vue Async Modal Component, vue-async-modal Plugin/Github, vue js modal vue 3, vue modal npm


See Demo And Download

Official Website(JounQin): Click Here

This superior jQuery/javascript plugin is developed by JounQin. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.