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

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

Javascript webcodeflow · May 31, 2022 · Comments off

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