vue-modal

A customizable, stackable, and lightweight modal component for Vue.js 3.
:fire: 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.
Features at a glance
- 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 - before-open, opening, after-open, before-close, closing, after-close, update:modelValue (close)
- Scrollable when it's contents exceed screen height
- Closeable by clicking on the upper right "x", the overlay or the
esc
key
- 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
Browsers support
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/
Development
In order to start development:
npm i
npm run dev