FocusTrap

A Vue component that traps focus

This component is a light wrapper around focus-trap, tailored to your Vue-specific needs.

Forked from the no longer maintained wovue-focus-trap

Live examples & Docs

Documentation can be viewed at http://beta.viafoura.com/focus-trap/

Features

• The focus trap automatically activates on ready hook (by default, though this can be changed).
• The focus trap automatically deactivates on destroyed hook.
• The focus trap can be activated and deactivated, paused and unpaused via props.

Getting Started

Please read the focus-trap documentation to understand what a focus trap is, what happens when a focus trap is activated, and what happens when one is deactivated.

NPM

Install the package using npm

$ npm install --save @viafoura/vue-focus-trap

Install the plugin

import Vue from 'vue';
import { FocusTrap } from '@viafoura/vue-focus-trap';

// Use it as a global component...
Vue.component('focus-trap', FocusTrap);

// Or as a local component:
export const MyComponent = {
  // ...
  components: {
    FocusTrap
  }
  // ...
}

Browser

TODO

Basic Usage

<button @click="mountTrap">mount trap</button>
<wv-focus-trap v-if="isTrapVisible" :active="isTrapActive">
  <p>Here is a focus trap <a href='#!'>with</a> <a href='#!'>some</a> <a href='#!'>focusable</a> parts.</p>
  <button @click="toggleTrap">toggle trap</button>
</wv-focus-trap>

import { FocusTrap } from '@viafoura/vue-focus-trap';

export default {
  data () {
    return {
      isTrapVisible: false,
      isTrapActive: true
    };
  },
  methods: {
    mountTrap () {
      this.isTrapVisible = true;
    },
    toggleTrap () {
      this.isTrapActive = !this.isTrapActive;
    },
  },
  components: {
    FocusTrap
  },
};

Development

# install dependencies
npm install

# serve with hot reload src-docs at localhost:8080
npm run dev

# build for production with minification src-docs and src
npm run build

# copy docs folder to gh-pages branch and push
npm run deploy-docs