Skip to content
Vue component to trap the focus within a DOM element
JavaScript TypeScript
Branch: master
Clone or download
dependabot-preview build(deps-dev): bump rollup from 1.26.5 to 1.27.0
Bumps [rollup]( from 1.26.5 to 1.27.0.
- [Release notes](
- [Changelog](
- [Commits](rollup/rollup@v1.26.5...v1.27.0)

Signed-off-by: dependabot-preview[bot] <>
Latest commit 13a81be Nov 13, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore: add .github folder Jul 30, 2019
cypress test: add cypress test Jul 30, 2019
demo ci: fix starting the server Jul 30, 2019
.gitignore chore: update deps Jul 30, 2019
LICENSE chore: add license Jul 30, 2019 docs: add focus-trap dep to installation Jul 30, 2019
circle.yml ci: reset cache key Jul 30, 2019
package.json build(deps-dev): bump rollup-plugin-typescript2 from 0.24.3 to 0.25.2 Nov 6, 2019
rollup.config.js build: use es5 for esm build as well Jul 30, 2019
tsconfig.json build: use rollup for build Jul 23, 2019
webpack.config.js test: add cypress test Jul 30, 2019
yarn.lock build(deps-dev): bump rollup from 1.26.5 to 1.27.0 Nov 13, 2019

focus-trap-vue Build Status npm package thanks

Vue component to trap the focus within a DOM element


npm install focus-trap focus-trap-vue


This library exports one single named export FocusTrap and requires focus-trap as a peer dependency. So you can locally import the component or declare it globally:

import { FocusTrap } from 'focus-trap-vue'

Vue.component('FocusTrap', FocusTrap)

FocusTrap can be controlled in three different ways:

  • by using the active Boolean prop
  • by using v-model (uses the active prop)
  • by calling the activate/deactivate method on the component

The recommended approach is using v-model and it should contain one single child:

<focus-trap v-model="isActive">
  <modal-dialog tabindex="-1">
      Do you accept the cookies?
    <button @click="acceptCookies">Yes</button>
    <button @click="isActive = false">No</button>

When isActive becomes true, it activates the focus trap. By default it sets the focus to its child, so make sure the element is a focusable element. If it's not you wil need to give it the tabindex="-1" attribute. You can also customize the initial element focused. This element should be an element that the user can interact with. For example, an input. It's a good practice to always focus an interactable element instead of the modal container:

<focus-trap v-model="isActive" :initial-focus="() => $refs.nameInput">
      What name do you want to use?
    <form @submit.prevent="setName">
        New Name
        <input ref="nameInput" />
      <button>Change name</button>


FocusTrap also accepts other props:

  • escapeDeactivates: boolean
  • returnFocusOnDeactivate: boolean
  • allowOutsideClick: boolean
  • initialFocus: string | (() => Element) Selector or function returning an Element
  • fallbackFocus: string | (() => Element) Selector or function returning an Element

Please, refer to focus-trap documentation to know what they do.


FocusTrap emits 2 events. They are in-sync with the prop active

  • activate: Whenever the trap activates
  • deactive: Whenever the trap deactivates (note it can also be deactivated by pressing Esc or clicking outside)


FocusTrap can be used without v-model. In that case, you will use the methods and probably need to initialize the trap as deactivated, otherwise, the focus will start as active:

<button @click="() => $refs.focusTrap.activate()">Show the modal</button>

<focus-trap :active="false" ref="focusTrap">
    <p>Hello there!</p>
    <button @click="() => $refs.focusTrap.deactivate()">Okay...</button>

Note the use of arrow functions, this is necessary because we are accessing $refs which are unset on first render.




You can’t perform that action at this time.