Vue Final Modal

🎉 Documentation

🙌 Examples

Introduction

Vue Final Modal is a renderless component
You can create a higher-order component easily and can customize template, script and style based on your needs.

features:

• Support Vue 3 and Vue 2
• Tailwind CSS friendly
• Renderless component
• SSR support
• Stackable
• Detachable
• Scrollable
• Transition support
• Mobile friendly
• Tiny bundle size

Install

Vue 3.0

NPM:

npm install vue-final-modal@next --save

Yarn:

yarn add vue-final-modal@next

Vue 2.x

NPM:

npm install vue-final-modal --save

Yarn:

yarn add vue-final-modal

Basic usage

1. Import and register the modal component.

import { VueFinalModal } from 'vue-final-modal'

export default {
  components: {
    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.

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

4. All default props

const CLASS_TYPES = [String, Object, Array]

{
  value: { type: Boolean, default: false },
  ssr: { type: Boolean, default: true },
  classes: { type: CLASS_TYPES, default: '' },
  overlayClass: { type: CLASS_TYPES, default: '' },
  contentClass: { type: CLASS_TYPES, default: '' },
  lockScroll: { type: Boolean, default: true },
  hideOverlay: { type: Boolean, default: false },
  clickToClose: { type: Boolean, default: true },
  preventClick: { type: Boolean, default: false },
  attach: { type: null, default: false, validator: validateAttachTarget },
  transition: { type: String, default: 'vfm' },
  overlayTransition: { type: String, default: 'vfm' },
  zIndexBase: { type: [String, Number], default: 1000 },
  zIndex: { type: [Boolean, String, Number], default: false }
}

5. Events.

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

Contribution

If you have any ideas for optimization of vue-final-modal, feel free to open issues or pull requests.