Accessibility auditing for Vue.js applications.
npm install -D vue-axe
yarn add -D vue-axe
import Vue from 'vue'
if (process.env.NODE_ENV !== 'production') {
const VueAxe = require('vue-axe')
Vue.use(VueAxe, {
config: {
// ...
rules: [
{ id: 'heading-order', enabled: true },
{ id: 'label-title-only', enabled: true },
// and more
]
}
})
Vue.config.productionTip = false
}
Optional: You can also pass settings through the second parameter at the time of installing the plugin, read about the object here:
https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure
Create plugin file plugins/axe.js
import Vue from 'vue'
if (process.env.NODE_ENV !== 'production') {
const VueAxe = require('vue-axe')
Vue.use(VueAxe, {
config: {
// your configuration data
}
})
Vue.config.productionTip = false
}
In config file nuxt.config.js
...
plugins: [
{ src: '~/plugins/axe', ssr: false }
]
<!-- Required Javascript -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-axe"></script>
Vue.use(VueAxe, {
config: {
// your configuration data
}
})
git clone https://github.com/vue-a11y/vue-axe.git vue-axe-demo
cd demo
npm install
npm run dev
It is a simple webpack template already installed and configured to run and check the logs in the browser console.
After the commands just access the http://localhost:8080/
git clone https://github.com/vue-a11y/vue-axe.git vue-axe
npm install
npm run test
Or run Cypress on interactive mode
npm run test:open
Author: vue-a11y
Live Demo: https://vue-axe.surge.sh/
GitHub: https://github.com/vue-a11y/vue-axe
#vuejs #javascript #vue-js