Vue3 A11y Modal

A simple Vue 3 component for building modal windows of almost any complexity.

Features

• Wrapper component for [email protected] (Kitty Giraudel)
  • Accessibility - Focus trap, aria-attributes
  • Light and fast
  • Nested dialogs (if you sure you need it)
• Simple registration and usage
• Ability to register both single or a group of modal windows on one page
• Full control over styling (built-in styles are completely optional)
• Two types - modal and alert window

Installation

# Npm
npm i -S vue3-a11y-modal

# Yarn
yarn add vue3-a11y-modal

Props

AppModal.vue

Prop | Type | Required | Default | Description ------------ | ------------ | ------------ | ------------ | ------------ title | String | false | null | Text in the heading of the modal window type | String | false | modal | Modal window mode modal - regular window, closes on ESC and by click on overlay alert - click on ovelray and ESC press doesn't close window, close button hidden. Only imperative closing possible target | String | false | body | CSS selector of target element that will contain the modal window closable | Boolean | false | true | Show/hide close button scrollLock | Boolean | false | true | Lock page scrolling while modal is open lazy | Boolean | false | true | true - the window content slot is rendered when the window is first opened and then stays in the DOM tree. false - the content will be created and destroyed every time the window is opened/closed ariaCLoseLabel | String | false | Close this dialog window | Aria label content for close button

Usage

<template>
  <button @click="modalWindow.open">Open</button>

  <AppModal title="Demo Window" ref="modalWindow"> 
    Demo content <br>
    <button @click="modalWindow.close">Close</button>
  </AppModal>
</template>

<script>
import { ref } from 'vue';
import { AppModal } from 'vue3-a11y-modal';

export default {
  name: 'DemoApp1',

  components: {
    AppModal,
  },

  setup() {
    const modalWindow = ref(null);

    return {
      modalWindow,
    };
  },
};
</script>

<style>
@import 'vue3-a11y-modal/dist/vue-modal-dialog.css';
</style>