kalcifer / vue-focus-trap

A component for Vue that traps user focus within a DOM element.

vue-focus-trap

A component for Vue that traps user focus within a DOM element.

Installation

Install via npm:

% npm install vue-focus-trap

Usage

import FocusTrap from "vue-focus-trap";

<FocusTrap v-bind:is-active="true">
  <Dialog />
</FocusTrap>

When isActive becomes true, it activates the focus trap. By default it sets the focus to the first focusable element within the component. This can be overriden with the initialFocus prop.

Props

• isActive: boolean
• initialFocus: (() => Element) function returning an Element