// the find
posva/focus-trap-vue
Vue component to trap the focus within a DOM element
A thin Vue component wrapper around the focus-trap library, giving you a <FocusTrap> component instead of wiring up the imperative API yourself. Useful for anyone building modals, drawers, or dropdowns in Vue 2 or Vue 3 who needs proper keyboard focus containment for accessibility.
It's a genuinely thin wrapper — all the actual focus-trapping logic lives in the well-tested focus-trap package, so this library isn't reinventing anything risky. Supports both v-model:active and imperative activate()/deactivate() methods, which covers both declarative and ref-driven usage patterns. Written in TypeScript (src/FocusTrap.ts, global.d.ts) with a dedicated api-extractor.json, so type definitions are intentional rather than an afterthought. Maintained by posva, who also maintains vue-router and pinia, so the Vue-specific plumbing (props/events syncing, v-model) is handled by someone who knows Vue's internals well.
217 stars is small for something this foundational — you're betting on a single maintainer's bandwidth for a component that will sit in your critical a11y path. Vue 2 and Vue 3 are separate npm tags (focus-trap-vue@legacy vs focus-trap-vue) rather than one package handling both, which is an easy thing to get wrong during a migration. Test coverage is thin: only one Cypress e2e spec (main.cy.js) covers the whole component, so edge cases around nested traps, SSR, or dynamic children aren't obviously covered. The initialFocus/fallbackFocus API requires passing a function returning an element rather than a ref directly, with a documented gotcha about $refs being unset on first render — a rough edge that will trip up new users.