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-axe@next # or yarn add -D axe-core vue-axe@next

import{createApp,h,Fragment}from'vue'importAppfrom'./App.vue'letapp=nullif(process.env.NODE_ENV==='development'){constVueAxe=require('vue-axe')app=createApp({render: ()=>h(Fragment,[h(App),h(VueAxe.VueAxePopup)])})app.use(VueAxe.default)}else{app=createApp(App)}app.mount('#app')

In Vite you need to add axe-core in the dependency optimization option (optimizeDeps).

In your vite.config.js

importvuefrom'@vitejs/plugin-vue'exportdefault{plugins: [vue()],optimizeDeps: {include: ['axe-core']}}

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.

constplugins=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

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

• Enable highlighting of elements with errors on the page;
• i18n;
• Announce "views" changes to the screen reader;
• New documentation;
• Add focus trap in the popup;
• How to use (Vite)
• Add links (references file) to learn more;
• Typescript support;
• Add keyboard shortcut to open pop-up;
• Animation slide-right (to details view) & slide-left (to violations view);
• Carousel to element source when greater than 3;
• Export violations (Output format to be defined);

• 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