A Vue.js modal component that adhere's to the W3C Web Accessibility Initiative.

Usage no npm install needed!

<script type="module">
  import 160over90VueWaiModal from 'https://cdn.skypack.dev/@160over90/vue-wai-modal';




Vue Modal is a component that adhere's to the W3C Web Accessibility Initiative and provides and easy way to impliment a modal.

If you do not have yarn you can download it here.

Instructions for global registration

yarn add @160over90/vue-wai-modal

Include in main.js (app entry point)

import VueWaiModal from '@160over90/vue-wai-modal';


Instructions for editing this package

yarn install

Compiles and hot-reloads for development

yarn run serve


An simple example of implimenting the modal.

  <div id="app">
    <ModalButton :controls="'example-modal'">
      Open button
      :transitionProps="{ name: 'fade' }"
          v-text="'Modal Content'"
        <ModalButton :controls="'example-modal'">
          Close button


--- Modal Backdrop Component ---

id (String, Required) The ID that matches the button to the modal Backdrop

transition (String, Default: 'transition') Links to a transition component

transitionProps (Object, Default: () => ({})) Links to the name of the transition

:transitionProps="{ name: 'fade' }"
.fade-leave-active {
  transition: opacity 0.5s ease;

.fade-leave-to {
  opacity: 0;

initiallyOpen (Boolean, Default: false) Page loads with modal already open

mode (String, Default: 'show', validate(value)) Checks for a v-if, v-show

closedFocus ([HTMLElement, String], Default: undefined)

--- Modal Backdrop Dialog ---

ariaLabel (String, Default: null) Used to define a string that labels the current element in cases where text is not visible on the screen

ariaLabelledby (String, Default: null) Establishes relationships between objects and their labels for assistive technology, such as screen readers

--- Modal Button ---

controls (String, Required) Links to the Backdrop ID (must be the same)