@kouts/vue-modal

A modal window component for Vue

Usage no npm install needed!

<script type="module">
  import koutsVueModal from 'https://cdn.skypack.dev/@kouts/vue-modal';
</script>

README

vue-modal

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

:fire: 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.

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 - close, before-open, opening, after-open, before-close, closing, after-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

IE / Edge
IE / Edge		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari		 Opera
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/

Development

In order to start development:

npm i
npm run watch