vue-modal

Vue modal

A customizable, stackable, and lightweight modal component for Vue.js 3.

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)open in new window 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

Edgeopen in new window
Edge		Firefoxopen in new window
Firefox		Chromeopen in new window
Chrome		Safariopen in new window
Safari		Operaopen in new window
Opera
Edgelast 2 versionslast 2 versionslast 2 versionslast 2 versions

vue-modal 5.0 release

The 5.0 release of vue-modal introduced the following breaking changes:

  • Renamed event names after-close to closed and after-open to opened
  • Added a Plugin API so that modals can be opened and closed using a name prop.