Accessibility auditing for Vue.js 3 applications by running dequelabs/axe-core validation on the page you're viewing.

• Links
• Setup
• Options
• Locales

• Demo

npm install -D axe-core @vue-a11y/axe # or yarn add -D axe-core @vue-a11y/axe

import { createApp, h } from 'vue' import App from './App.vue' let app = null if (process.env.NODE_ENV === 'development') { const VueAxe = require('@vue-a11y/axe') app = createApp({ render: () => h('div', {}, [h(App), h(VueAxe.VueAxePopup)]) }) app.use(VueAxe.default) } else { app = createApp(App) } app.mount('#app')

If false disables automatic verification. It is necessary to click on run again for a new analysis.

To configure the format of the data used by axe.
This can be used to add new rules, which must be registered with the library to execute.

NOTE: Learn more about Axe-core configuration

Flexible way to configure how axeCore.run() operates.

NOTE: Learn more about Axe-core runtime options

Register Axe plugins.

const plugins = require('@/plugins/axe') app.use(VueAxe, { plugins: [plugins.myPlugin, plugins.myPlugin2] })

Through the settings it is possible to define the language that will be used for the violations.

NOTE: axe-core already has several languages ​​available.
See axe-core locales

const ptBR = require('axe-core/locales/pt_BR.json') app.use(VueAxe, { config: { locale: ptBR } })

• From typos in documentation to coding new features;
• Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;
• Fork repository, make changes and send a pull request;

Follow us on Twitter @vue_a11y

Thank you