Vue accessibility (vue-announcer)

About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    setTimeout(() => {
      this.$announcer.set('Notification: A surprising announcement!')
    }, 10000)
  }
}
</script>

App.vue

<template>
  <div id="app">
    <vue-announcer data-va="announcer" />
    <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>
    <router-view/>
  </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 VueAnnouncer from "vue-announcer";

Vue.config.productionTip = false;

Vue.use(VueAnnouncer, {
  complementRoute: "is ready!",
}, router);

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

router.js

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
      meta: {
        announcer: "Home route"
      }
    },
    {
      path: "/about",
      name: "about",
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/About.vue"),
      meta: {
        announcer: "About route"
      }
    }
  ]
});