{"id":13635430,"url":"https://github.com/vue-a11y/vue-axe-next","last_synced_at":"2025-05-04T22:52:56.745Z","repository":{"id":38078854,"uuid":"298836348","full_name":"vue-a11y/vue-axe-next","owner":"vue-a11y","description":"Accessibility auditing for Vue.js 3 applications using axe-core","archived":false,"fork":false,"pushed_at":"2021-01-28T19:09:32.000Z","size":608,"stargazers_count":56,"open_issues_count":5,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-30T16:23:37.736Z","etag":null,"topics":["a11y","accessibility","accessibility-audits","auditing","axe","axe-core","deque","vue","vue-axe","vue3"],"latest_commit_sha":null,"homepage":"https://vue-axe-next.surge.sh/","language":"Vue","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/vue-a11y.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-26T14:52:31.000Z","updated_at":"2025-04-06T19:44:40.000Z","dependencies_parsed_at":"2022-07-20T01:04:27.355Z","dependency_job_id":null,"html_url":"https://github.com/vue-a11y/vue-axe-next","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-a11y%2Fvue-axe-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-a11y%2Fvue-axe-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-a11y%2Fvue-axe-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-a11y%2Fvue-axe-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vue-a11y","download_url":"https://codeload.github.com/vue-a11y/vue-axe-next/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252411816,"owners_count":21743604,"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","accessibility","accessibility-audits","auditing","axe","axe-core","deque","vue","vue-axe","vue3"],"created_at":"2024-08-02T00:00:45.500Z","updated_at":"2025-05-04T22:52:56.726Z","avatar_url":"https://github.com/vue-a11y.png","language":"Vue","funding_links":[],"categories":["Components and plugins"],"sub_categories":["Development"],"readme":"\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"vue-axe.svg\" alt=\"Vue Axe logo\"\u003e\n\u003c/p\u003e\n\n## [@vue-a11y/axe](https://github.com/vue-a11y/vue-axe)\nAccessibility auditing for Vue.js 3 applications by running [dequelabs/axe-core](https://github.com/dequelabs/axe-core/) validation on the page you're viewing.\n\n- [Links](#links)\n- [Setup](#setup)\n- [Options](#options)\n- [Locales](#locales)\n\n## Links\n- [Demo](https://vue-axe-next.surge.sh/)\n\n## Setup\n```shell\nnpm install -D axe-core vue-axe@next\n# or\nyarn add -D axe-core vue-axe@next\n```\n\n### main.js\n```js\nimport { createApp, h, Fragment } from 'vue'\nimport App from './App.vue'\n\nlet app = null\n\nif (process.env.NODE_ENV === 'development') {\n  const VueAxe = require('vue-axe')\n  app = createApp({\n    render: () =\u003e h(Fragment, [h(App), h(VueAxe.VueAxePopup)])\n  })\n  app.use(VueAxe.default)\n} else {\n  app = createApp(App)\n}\n\napp.mount('#app')\n```\n\n## Vite\n\nIn Vite you need to add `axe-core` in the dependency optimization option (optimizeDeps).\n\nIn your `vite.config.js`\n\n```js\nimport vue from '@vitejs/plugin-vue'\n\nexport default {\n  plugins: [vue()],\n  optimizeDeps: {\n    include: ['axe-core']\n  }\n}\n```\n\n## Options\n\n### auto\n\n| Type     | Default  |\n| -------- | -------- |\n| Boolean  | `true`   | \n\nIf false disables automatic verification. \nIt is necessary to click on `run again` for a new analysis.\n\n### config\n\n| Type     | Default                                  |\n| -------- | ---------------------------------------- |\n| Object   | `{ branding: { application: 'vue-axe' }` | \n\nTo configure the format of the data used by axe.  \nThis can be used to add new rules, which must be registered with the library to execute.\n\nNOTE: Learn more about [Axe-core configuration](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure)\n\n### runOptions\n\n| Type     | Default                                                         |\n| -------- | --------------------------------------------------------------- |\n| Object   | `{ runOptions: { reporter: 'v2', resultTypes: ['violations'] }` | \n\nFlexible way to configure how `axeCore.run()` operates.\n\nNOTE: Learn more about [Axe-core runtime options](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#options-parameter)\n\n### plugins\n\n| Type     |\n| -------- |\n| Array    | \n\nRegister Axe plugins.\n\n```js\nconst plugins = require('@/plugins/axe')\napp.use(VueAxe, {\n  plugins: [plugins.myPlugin, plugins.myPlugin2]\n})\n```\n\n## Locales\n\nThrough the settings it is possible to define the language that will be used for the violations.\n\nNOTE: axe-core already has several languages ​​available.  \n[See axe-core locales](https://github.com/dequelabs/axe-core/tree/develop/locales)\n\n```js\nconst ptBR = require('axe-core/locales/pt_BR.json')\napp.use(VueAxe, {\n  config: {\n    locale: ptBR\n  }\n})\n```\n\n## Roadmap\n\n- [x] Enable highlighting of elements with errors on the page;\n- [x] i18n;\n- [x] Announce \"views\" changes to the screen reader;\n- [x] New documentation;\n- [x] Add focus trap in the popup;\n- [x] How to use (Vite)\n- [ ] Add links (references file) to learn more;\n- [ ] Typescript support;\n- [ ] Add keyboard shortcut to open pop-up;\n- [ ] Animation slide-right (to details view) \u0026 slide-left (to violations view);\n- [ ] Carousel to element source when greater than 3;\n- [ ] Export violations (Output format to be defined);\n\n## Contributing\n- From typos in documentation to coding new features;\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\n- Fork repository, make changes and send a pull request;\n\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\n\n**Thank you**\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-a11y%2Fvue-axe-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvue-a11y%2Fvue-axe-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-a11y%2Fvue-axe-next/lists"}