@kouts/vue-modal

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 or with a name prop and show/hide functions
• 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 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	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/

Development

In order to start development:

pnpm i
pnpm run dev