{"id":13635332,"url":"https://github.com/posva/focus-trap-vue","last_synced_at":"2025-05-15T05:08:18.385Z","repository":{"id":35051207,"uuid":"199641363","full_name":"posva/focus-trap-vue","owner":"posva","description":"Vue component to trap the focus within a DOM element","archived":false,"fork":false,"pushed_at":"2025-05-07T00:13:26.000Z","size":2589,"stargazers_count":212,"open_issues_count":3,"forks_count":20,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-09T06:46:29.830Z","etag":null,"topics":["a11y","focus","lock","trap","ui","ux","vue"],"latest_commit_sha":null,"homepage":"https://focus-trap-vue.esm.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/posva.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/funding.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"posva"}},"created_at":"2019-07-30T11:47:56.000Z","updated_at":"2025-02-25T19:51:55.000Z","dependencies_parsed_at":"2023-11-06T05:23:58.003Z","dependency_job_id":"824ab83d-3c9d-40ab-8383-37903e8c2ef8","html_url":"https://github.com/posva/focus-trap-vue","commit_stats":{"total_commits":519,"total_committers":18,"mean_commits":"28.833333333333332","dds":0.5472061657032755,"last_synced_commit":"cce92db2b2265e836a526d29ed6400da14282096"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Ffocus-trap-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Ffocus-trap-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Ffocus-trap-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Ffocus-trap-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posva","download_url":"https://codeload.github.com/posva/focus-trap-vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254276447,"owners_count":22043867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","focus","lock","trap","ui","ux","vue"],"created_at":"2024-08-02T00:00:44.110Z","updated_at":"2025-05-15T05:08:13.374Z","avatar_url":"https://github.com/posva.png","language":"JavaScript","funding_links":["https://github.com/sponsors/posva"],"categories":["Components and plugins"],"sub_categories":["Courses"],"readme":"# focus-trap-vue [![Build Status](https://badgen.net/circleci/github/posva/focus-trap-vue)](https://circleci.com/gh/posva/focus-trap-vue) [![npm package](https://badgen.net/npm/v/focus-trap-vue)](https://www.npmjs.com/package/focus-trap-vue) [![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/posva/thanks)\n\n\u003e Vue component to trap the focus within a DOM element\n\n## Installation\n\n### For Vue 2\n\n```sh\nnpm install focus-trap focus-trap-vue@legacy\n```\n\n###  For Vue 3\n\n```sh\nnpm install focus-trap focus-trap-vue\n```\n\n## Usage\n\nThis library exports one single named export `FocusTrap` and **requires\n[`focus-trap`](https://github.com/focus-trap/focus-trap) as a peer\ndependency**. So you can locally import the component or declare it globally:\n\n###  Register globally in a Vue 2 app\n\n```js\nimport { FocusTrap } from 'focus-trap-vue'\n\nVue.component('FocusTrap', FocusTrap)\n```\n\n###  Register globally in a Vue 3 app\n\n```js\nimport { FocusTrap } from 'focus-trap-vue'\n\ncreateApp(App)\n  .component('FocusTrap', FocusTrap)\n  .mount('#app')\n```\n\n**Note this documentation is for Vue 3 and some props/events might not exist in the Vue 2 version**\n\n`FocusTrap` can be controlled in three different ways:\n\n- by using the `active` _Boolean_ prop\n- by using `v-model:active` (uses the `active` prop, _Vue 3 only_)\n- by calling the `activate`/`deactivate` method on the component\n\nThe recommended approach is using `v-model:active` and it should contain **one single child**:\n\n```html\n\u003cfocus-trap v-model:active=\"isActive\"\u003e\n  \u003cmodal-dialog tabindex=\"-1\"\u003e\n    \u003cp\u003eDo you accept the cookies?\u003c/p\u003e\n    \u003cbutton @click=\"acceptCookies\"\u003eYes\u003c/button\u003e\n    \u003cbutton @click=\"isActive = false\"\u003eNo\u003c/button\u003e\n  \u003c/modal-dialog\u003e\n\u003c/focus-trap\u003e\n```\n\nWhen `isActive` becomes `true`, it activates the focus trap. By default it sets\nthe focus to its child, so make sure the element is a focusable element. If it's\nnot you wil need to give it the `tabindex=\"-1\"` attribute. You can also\ncustomize the initial element focused. This element should be an element that\nthe user can interact with. For example, an input. It's a good practice to\nalways focus an interactable element instead of the modal container:\n\n```html\n\u003cfocus-trap v-model:active=\"isActive\" :initial-focus=\"() =\u003e $refs.nameInput\"\u003e\n  \u003cmodal-dialog\u003e\n    \u003cp\u003eWhat name do you want to use?\u003c/p\u003e\n    \u003cform @submit.prevent=\"setName\"\u003e\n      \u003clabel\u003e\n        New Name\n        \u003cinput ref=\"nameInput\" /\u003e\n      \u003c/label\u003e\n      \u003cbutton\u003eChange name\u003c/button\u003e\n    \u003c/form\u003e\n  \u003c/modal-dialog\u003e\n\u003c/focus-trap\u003e\n```\n\n### Props\n\n`FocusTrap` also accepts other props:\n\n- `escapeDeactivates`: `boolean`\n- `returnFocusOnDeactivate`: `boolean`\n- `allowOutsideClick`: `boolean | ((e: MouseEvent | TouchEvent) =\u003e boolean)`\n- `clickOutsideDeactivates`: `boolean | ((e: MouseEvent | TouchEvent) =\u003e boolean)`\n- `initialFocus`: `string | (() =\u003e Element)` _Selector or function returning an Element_\n- `fallbackFocus`: `string | (() =\u003e Element)` _Selector or function returning an Element_\n- `delayInitialFocus`: `boolean`\n- `tabbableOptions`: `FocusTrapTabbableOptions` _Options passed to `tabbableOptions`_\n\nPlease, refer to\n[focus-trap](https://github.com/focus-trap/focus-trap#focustrap--createfocustrapelement-createoptions)\ndocumentation to know what they do.\n\n### Events\n\n`FocusTrap` emits 2 events. They are in-sync with the prop `active`\n\n- `activate`: Whenever the trap activates\n- `deactivate`: Whenever the trap deactivates (note it can also be deactivated by\n  pressing \u003ckbd\u003eEsc\u003c/kbd\u003e or clicking outside)\n\n### Methods\n\n`FocusTrap` can be used without `v-model:active`. In that case, you will use the\nmethods and _probably_ need to initialize the trap as _deactivated_, otherwise,\nthe focus will start as active:\n\n```html\n\u003cbutton @click=\"() =\u003e $refs.focusTrap.activate()\"\u003eShow the modal\u003c/button\u003e\n\n\u003cfocus-trap :active=\"false\" ref=\"focusTrap\"\u003e\n  \u003cmodal-dialog\u003e\n    \u003cp\u003eHello there!\u003c/p\u003e\n    \u003cbutton @click=\"() =\u003e $refs.focusTrap.deactivate()\"\u003eOkay...\u003c/button\u003e\n  \u003c/modal-dialog\u003e\n\u003c/focus-trap\u003e\n```\n\nNote the use of arrow functions, this is necessary because we are accessing\n`$refs` which are unset on first render.\n\n## Related\n\n- Focus Trap: https://github.com/focus-trap/focus-trap\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n\n\u003cdiv align=\"right\"\u003e\n\u003csub\u003e\u003cem\u003e\nThis project was created using the \u003ca href=\"https://github.com/posva/focus-trap-vue-boilerplate\" rel=\"nofollow\"\u003eVue Library boilerplate\u003c/a\u003e by \u003ca href=\"https://github.com/posva\" rel=\"nofollow\"\u003eposva\u003c/a\u003e\n\u003c/em\u003e\u003c/sub\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposva%2Ffocus-trap-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposva%2Ffocus-trap-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposva%2Ffocus-trap-vue/lists"}