Slim Modal Popup Component For Vue

Install & Download:

# Yarn
$ yarn add vue-slim-popup
# NPM
$ npm i vue-slim-popup

Description:

A simple, elegant, mobile-friendly modal popup component for Vue 2+ applications.

How to use it:

1. Install and import the slim component.

import SlimPopup from 'vue-slim-popup';

// register
export default {
  components: {
    SlimPopup,
  },
}

2. Add the vue-slim-popup component to the template.

<SlimPopup
  :show.sync="centerShow"
  Any Content Here
</SlimPopup>

3. Available component props.

show: {
  // .sync
  type: Boolean,
  default: false,
},
hideOnMaskClick: {
  type: Boolean,
  default: false,
},
forceRenderOnShow: {
  type: Boolean,
  default: false,
},
maskTransition: {
  type: String,
  default: 'slim-fade',
},
popupTransition: {
  // 'slim-scale-center' 'slim-zoom-center', 'slim-slide-top', 'slim-slide-bottom', 'slim-slide-left', 'slim-slide-right'
  type: String,
  default: null,
},
maskClass: {
  type: Array,
  default: null,
},
popupClass: {
  type: Array,
  default: null,
},
maskStyle: {
  type: Object,
  default: null,
},
popupStyle: {
  type: Object,
  default: null,
},
popupPosition: {
  // 'center', 'top', 'bottom', 'left', 'right'
  type: String,
  default: 'center',
},
preventMaskTouchmove: {
  type: Boolean,
  default: true,
},
preventPopupTouchmove: {
  type: Boolean,
  default: true,
},
preventBodyScroll: {
  type: Boolean,
  default: false,
},

4. Event handlers.

• @maskClick: when the mask is clicked
• @popupClick: when the popup is clicked

Preview: