Mobile-friendly Modal Popup Library For Vue – Final Modal

Description:

Final Modal is a tiny, elegant, renderless, mobile-friendly, feature-rich modal window component for Vue.js 3/2.

More Features:

  • SSR support
  • Stackable
  • Detachable
  • Scrollable
  • Smooth Transitions
  • Vue.js compatible

Basic usage:

1. Import and register the modal component.

import { VueFinalModal } from 'vue-final-modal'
export default {
  components: {
    VueFinalModal
  }
}

// or
import { VueFinalModal } from 'vue-final-modal'
Vue.component('VueFinalModal', VueFinalModal)

2. Add the modal component to the template.

<vue-final-modal v-model="showModal">
  Modal Content Here
</vue-final-modal>

3. Create a button to toggle the modal.

<base-button @click="showModal = true">
  Launch
</base-button>

4. All default props.

{
  value: { type: Boolean, default: false },
  ssr: { type: Boolean, default: true },
  classes: { type: [String, Object, Array], default: '' },
  overlayClass: { type: [String, Object, Array], default: '' },
  contentClass: { type: [String, Object, Array], default: '' },
  styles: { type: [String, Object, Array], default: '' },
  overlayStyle: { type: [String, Object, Array], default: '' },
  contentStyle: { type: [String, Object, Array], default: '' },
  lockScroll: { type: Boolean, default: true },
  hideOverlay: { type: Boolean, default: false },
  clickToClose: { type: Boolean, default: true },
  escToClose: { type: Boolean, default: false },
  preventClick: { type: Boolean, default: false },
  attach: { type: null, default: false, validator: validateAttachTarget },
  transition: { type: String, default: 'vfm' },
  overlayTransition: { type: String, default: 'vfm' },
  zIndexAuto: { type: Boolean, default: true },
  zIndexBase: { type: [String, Number], default: 1000 },
  zIndex: { type: [Boolean, String, Number], default: false },
  focusRetain: { type: Boolean, default: true },
  focusTrap: { type: Boolean, default: false }
}

5. Events.

  • @before-open: Before open
  • @opened: When opened
  • @before-close: Before close
  • @closed: After closed

Previews:

Final Modal

Changelog:

v3.3.1 (06/12/2021)

  • Bugfix

v2.3.1 (05/24/2021)

  • Fixed Cannot read property ‘removeEventListener’ of undefined when using resize in nuxt and navigating away

v2.3 (05/16/2021)

  • Make modal draggable and resizable

v2.2 (05/05/2021)

  • update

v2.1 (03/22/2021)

  • feat: Added custom transition object support
  • refactor: keydown event is refactored for more generic use

v3.0.1 (03/09/2021)

  • Support String type for the slots of dynamic modal

v2.0/3.0 (03/07/2021)

  • Dynamic modals

v1.8.8 (03/04/2021)

  • Bugfix

v1.8.6 (02/09/2021)

  • fix: mobile safari dont scroll

v1.8.5 (01/21/2021)

  • fix: Scroll blocking doesn’t work on ios(safari)

v1.8.3 (12/28/2020)

  • fix: $vfm.openedModals should not reference with $vfm.modals

v1.8.2 (12/28/2020)

v1.8.1 (12/16/2020)

  • Bugfix

v1.8.0 (12/15/2020)

  • support prop zIndexAuto
  • support $vfm.get API
  • support vetur intellisense
  • refactor lock-scroll prop
  • Bugfix

v1.7.1 (12/08/2020)

  • fix: beforeDestroy should not emit before-close event

v1.7.0 (12/08/2020)

  • make before-open, before-close stoppable
  • passing params in show method

v1.6.3 (12/03/2020)

v1.6.2 (12/01/2020)

  • Fixed Background shifts when modal is opened (if background has scrollbar)

v1.6.0 (11/13/2020)

  • Support Esc key to close modal for Vue 3

v1.5.2 (11/12/2020)

  • remove cursor poiner on overlay.

v1.5.0 (11/09/2020)

  • Support customize configuration include key and componentName.
  • Bugfix: Scrollbar only reappears when all the modals are closed.

v1.4.2 (11/02/2020)

  • Fix modal instance is not removed when the component is destroyed.

v1.4.1 (10/26/2020)

  • remove lockScroll after modal leave

v1.3.0 (10/16/2020)

  • Built-in focusTrap for a11y

v1.14 (10/01/2020)

  • A11y support
  • New event @click-outside
  • Remove useless slots content-before, content, content-after

v1.0.1 (10/01/2020)

  • Support Vue 3.0

v0.13.4 (09/28/2020)

  • fixed css transition
  • call handleLockScroll only when value is true

v1.0.0beta (09/22/2020)

  • Support Vue 3.0

v0.13.3 (09/16/2020)

  • fixed body-scroll-lock on mobile

v0.13.1 (09/02/2020)

  • Fixed: Modal DOM element should be removed at beforeDestroy hook

v0.13.0 (09/01/2020)

  • Add new prop zIndexBase.
  • Support auto binding zIndex with modalStackIndex.
  • Fixed computed isComponentReadyToBeDestroyed.
  • Refactor VueFinalModal style.
  • Set prop attach default from body to false.

Download Details:

Author: vue-final

Live Demo: https://vue-final-modal.org/examples

Download Link: https://github.com/vue-final/vue-final-modal/archive/master.zip

Official Website: https://github.com/vue-final/vue-final-modal

Install & Download:

# Yarn
$ yarn add vue-final-modal

# NPM
$ npm i vue-final-modal

You Might Be Interested In:

Add Comment