Accessibility auditing for Vue.js 3 applications by running dequelabs/axe-core validation on the page you’re viewing.
npm install -D axe-core vue-axe@next
# or
yarn add -D axe-core vue-axe@next
import { createApp, h, Fragment } from 'vue'
import App from './App.vue'
let app = null
if (process.env.NODE_ENV === 'development') {
const VueAxe = require('vue-axe')
app = createApp({
render: () => h(Fragment, [h(App), h(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
import vue from '@vitejs/plugin-vue'
export default {
plugins: [vue()],
optimizeDeps: {
include: ['axe-core']
}
}
Type | Default |
---|---|
Boolean | true |
If false disables automatic verification. It is necessary to click on run again
for a new analysis.
Type | Default |
---|---|
Object | { branding: { application: 'vue-axe' } |
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
Type | Default |
---|---|
Object | { runOptions: { reporter: 'v2', resultTypes: ['violations'] } |
Flexible way to configure how axeCore.run()
operates.
NOTE: Learn more about Axe-core runtime options
Type |
---|
Array |
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
}
})
Follow us on Twitter @vue_a11y
Author: vue-a11y
Demo: https://vue-axe-next.surge.sh/
Source Code: https://github.com/vue-a11y/vue-axe-next
Thank you
#vue #vuejs #javascript