A customizable, stackable, and lightweight modal component for Vue.
🔥 HEADS UP! You're currently looking at vue-modal branch for Vue.js 2.
If you're looking for a Vue.js 3 compatible version of vue-modal, please check out the next branch.
vue-modal is designed with web applications in mind and tries to stick as much as possible to the accessibility best practices set in the WAI-ARIA Dialog (Modal) section of W3C.
- Lightweight, minified gzipped version is < 4kb
- Opens and closes with a data variable using
v-model - Includes sensible default styling but it's also highly customizable via user CSS classes and styles
- Override modal title and content via slots
- Modal intro and outro effects using CSS animation classes
- Exposes Component events -
close,before-open,opening,after-open,before-close,closing,after-close - Scrollable when its contents exceed screen height
- Closeable by clicking on the upper right "x", the overlay or the
esckey - Stackable - Multiple modal windows on top of each other
- Ability to set initial focus on an element when the modal window opens, just set the autofocus attribute on an element inside the modal
- Focus management traps keyboard focus - tabbed navigation inside the modal window
- Ability to have unclosable modal windows
- Render on demand or stay always in DOM with "live" mode
- Modals appended to
<body>by default, ability to append to a custom element
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
 Opera |
|---|---|---|---|---|
| IE11*, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Click here for documentation and examples https://vue-modal-demo.netlify.app/
In order to start development:
npm i
npm run watch