A Vue component that traps focus

Usage no npm install needed!

<script type="module">
  import viafouraVueFocusTrap from 'https://cdn.skypack.dev/@viafoura/vue-focus-trap';



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/


  • 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.


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: {
  // ...



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>
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: {


# 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