First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js.

Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal

How to make use of it:

Install and download:

# NPM
$ npm i vue-fullpage-modal

1. Import and register the conditional component.

import FullpageModal from 'vue-fullpage-modal'
Vue.use(FullpageModal)

2. Enable the button to toggle the modal popup.

<template>
  <div>
    <button @click="openModal">open</button>
  </div>
</template>

export default {
  methods: {
    openModal() {
      this.$FModal.show(
        { 
          component: myComponent,
          // more options here
        }, 
        { 
          msg: "Modal Popup Content" 
        }
      )
    }
  }
}

3. Hide the modal popup.

this.$FModal.hide();

4. Options available to customize modal popups.

value: {
  type: Boolean,
  required: true
},
fpmId: {
  type: Number | String
},
maxHeight: {
  type: Number | String,
  default: '80%'
},
height: {
  type: Number | String
},
width: {
  type: Number | String,
  default: 800
},
backgroundColor: {
  type: String,
  default: '#fff'
},
clickToClose: {
  type: Boolean,
  default: true
},
escToClose: {
  type: Boolean,
  default: true
},
placement: {
  type: String,
  default: 'center bottom'
},
modalStyles: {
  type: String | Object | Array
},
overlayStyles: {
  type: String | Object | Array
},
contentStyles: {
  type: String | Object | Array
}