Vue accessibility (vue-axe)

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link
        to="/"
        title="Go to home page (title)"
        aria-label="Go to home page (aria)"
      >Home</router-link> |
      <router-link
        to="/about"
        title="Go to about page (title)"
        aria-label="Go to about page (aria)"
      >About</router-link>
    </div>
    <!-- role="main" fix problem -->
    <div role="main">
      <router-view/>
    </div>
  </div>
</template>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import VueAxe from "vue-axe"; // Only dev mode

Vue.config.productionTip = false;

Vue.use(VueAxe, {
  config: {
    rules: [
      { id: 'heading-order', enabled: true },
      { id: 'label-title-only', enabled: true },
      { id: 'link-in-text-block', enabled: true },
      { id: 'region', enabled: true },
      { id: 'skip-link', enabled: true },
      { id: 'help-same-as-label', enabled: true }
    ]
  }
})

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");