Skip to content
A Vue component that traps focus
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A Vue component that traps focus

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

Live examples & Docs


  • 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 wovue-focus-trap --save

Install the plugin

import Vue from 'vue'
import FocusTrap from 'wovue-focus-trap'


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>
export default {
  data () {
    return {
      isTrapVisible: false,
      isTrapActive: true
  methods: {
    mountTrap () {
      this.isTrapVisible = true
    toggleTrap () {
      this.isTrapActive = !this.isTrapActive


# 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
You can’t perform that action at this time.