JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2333
  • Score
    100M100P100Q110123F
  • License MIT

A modal window component for Vue 3

Package Exports

  • @kouts/vue-modal
  • @kouts/vue-modal/dist/vue-modal.es.js
  • @kouts/vue-modal/dist/vue-modal.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@kouts/vue-modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-modal

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.

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