A customizable, stackable, and lightweight modal component for Vue.js 3.
🔥 HEADS UP! You're currently looking at vue-modal next branch for Vue.js 3.
If you're looking for a Vue.js 2 compatible version of vue-modal, please check out the master 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-modelor with anameprop andshow/hidefunctions - 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 -
before-open,opening,opened,before-close,closing,closed,update:modelValue(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
 Edge |
 Firefox |
 Chrome |
 Safari |
 Opera |
|---|---|---|---|---|
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Click here for documentation and examples https://next--vue-modal-demo.netlify.app/
In order to start development:
pnpm i
pnpm run dev