Trap Focus In An Element - vue-focus-loop

Install & Download:

Yet another Vue.js component for better accessibility that helps you trap focus within elements.

1. Import the component.

import Vue from 'vue'
import VueFocusLoop from '@vue-a11y/focus-loop'

2. Register the component.

// globally
Vue.use(VueFocusLoop)
// locally
import { FocusLoop } from '@vue-a11y/focus-loop'
export default {
  components: {
  FocusLoop
  }
}

3. Wrap your element in the <FocusLoop> component.

<FocusLoop>
...
</FocusLoop>

4. Disable the focus trap.

<FocusLoop disabled>
...
</FocusLoop>

05/05/2021