• Stars
    star
    123
  • Rank 281,041 (Top 6 %)
  • Language Vue
  • License
    MIT License
  • Created over 4 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

vue-modal

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


๐Ÿ”ฅ 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 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

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

โš ๏ธ * For IE11 Compatibility an Object.assign polyfill is required.


Click here for documentation and examples https://vue-modal-demo.netlify.app/

Development

In order to start development:

npm i
npm run watch

More Repositories

1

vue-dataset

A set of Vue.js components to display datasets (lists) with filtering, paging, and sorting capabilities!
JavaScript
219
star
2

vue-search-input

A search input component for Vue.js 3
Vue
27
star
3

vue-vite-starter-template

A single page app Vite starter template, created to easily bootstrap Vue.js 2 apps
JavaScript
16
star
4

vue3-ts-vite-starter-template

Vue.js 3 TypeScript / Vite starter template with Pinia, Vue Router, Bootstrap and more.
Vue
16
star
5

vue3-vite-starter-template

A single page app Vite starter template, created to easily bootstrap Vue.js 3 apps
JavaScript
12
star
6

ractive-modal

A modal window component for Ractive
HTML
8
star
7

best-classic-wb

HTML
7
star
8

vuepress-plugin-vue-example

A Vuepress plugin to display Vue components' live examples and source code inside documentation.
Vue
6
star
9

vue-set-path

A set of utility methods to update Vue reactive objects, using the dot notation path syntax.
JavaScript
4
star
10

vue3-starter-template

A single page app starter template created to easily bootstrap Vue.js 3 apps
JavaScript
4
star
11

vue-path-store

A simple state management solution for Vue, that uses the dot notation path syntax.
JavaScript
4
star
12

webpack-assets-loader

Webpack assets loader demo project
JavaScript
2
star
13

promise-loading-handler

A utility to handle loading indicators state
TypeScript
2
star
14

vue-simple-dropdown

A Vue.js 3 simple dropdown menu component for floating-vue
Vue
2
star
15

ractive-droplist

A searchable select list for Ractive
HTML
1
star
16

vue-starter-template

A single page app starter template created to easily bootstrap Vue.js 2 apps
JavaScript
1
star