Custom Elegant Modal Dialog Component – Eagle Modal

Install & Download:

# NPM
$ npm install vue-eagle-modal --save

Description:

Eagle Modal is a Vue.js component to create customizable, dynamic, flexible, and pretty nice & clean modal windows & dialog boxes on the applications.

How to use it:

1. Install the package and import & register the Eagle Modal module.

import {EagleModal} from 'vue-eagle-modal' 
Vue.use(EagleModal);

2. Create a basic modal window.

<template>
  <eModal v-model='modal' ref='modal'></eModal>
</template>

<script>
  export default {
    components: {eModal},
    data(){
      return {
        modal:{
          title: 'Modal Title',
          items: [
            {
              label: 'Test',
              type:'text',
              name: 'e1',
              value: 'test'
            }
          ],
        }
      }
    },
    mounted(){
      this.$refs.modal.open();
    },
  }
</script>

3. Or create an alert dialog.

mounted(){
  this.$modals.alert({
    title: 'Custom Alert',
    text: "Alert Text",
  }).open();
}

Preview: