Mobile-first Fullscreen Modal Popup Library For Vue

Install & Download:

# NPM
$ npm i vue-fullpage-modal

Description:

A responsive, mobile-friendly, fullscreen modal popup library for Vue.js.

How to use it:

1. Import and register the modal component.

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

2. Enable a 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. Available options to customize the modal popup.

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
}