Added option to skip to non-announcer when changing specific route

Author: ktquez

example/src/pages/About.vue

@@ -7,29 +7,51 @@
       data-va="toasted"
       @click="notify"
     >
-      trigger notification
+      show error
     </button>
+    <div class="msg-error">
+      {{ errorMessage }}
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'About',
-  methods: {
-    notify () {
-      const message = 'Hi, it\'s a toasted notification'
-      this.$toasted.success(message)
-      this.$announcer.set(message)
+  data () {
+    return {
+      title: '',
+      errorMessage: null
     }
   },
-  head: {
-    title: {
-      inner: 'About page'
+  head () {
+    return {
+      title: {
+        inner: this.title
+      }
+    }
+  },
+  created () {
+    // get data post in server
+    setTimeout(() => {
+      this.title = 'Title of my awesome post'
+      this.$emit('updateHead')
+      this.$announcer.set(`${this.title} has loaded`, 'polite') // It's also possible to use the default complementRoute (this.$announcer.options.complementRoute)
+    }, 2000)
+  },
+  methods: {
+    notify () {
+      this.errorMessage = 'It\'s error message'
+      this.$announcer.set(this.errorMessage, 'assertive')
     }
   }
 }
 </script>
 
-<style>
-
+<style scoped>
+.msg-error {
+  color: #d4351c;
+  padding: 10px;
+  font-weight: bold;
+}
 </style>

example/src/router.js

@@ -16,22 +16,27 @@ const router = new VueRouter({
       component: Home,
       meta: {
         announcer: {
-          message: 'Home page',
           complementRoute: 'has loaded'
         }
       }
     },
     {
       name: 'about',
       path: '/about',
-      component: About
+      component: About,
+      meta: {
+        announcer: {
+          skip: true
+        }
+      }
     },
     {
       name: 'contact',
       path: '/contact',
       component: Contact,
       meta: {
         announcer: {
+          message: 'contact page',
           politeness: 'assetive',
           complementRoute: 'has fully loaded'
         }

src/constants.js

@@ -1,47 +1,58 @@
-import { OPTIONS } from './constants'
 import VueAnnouncer from './vue-announcer.vue'
 
 const draf = (cb) => requestAnimationFrame(() => requestAnimationFrame(cb))
 
 export default function install (Vue, options = {}, router = null) {
-  options = { ...OPTIONS, ...options }
+  // merge options
+  options = {
+    politeness: 'polite',
+    complementRoute: 'has loaded',
+    ...options
+  }
 
+  // Register vue-announcer component
   Vue.component('VueAnnouncer', VueAnnouncer)
+
   Vue.prototype.$announcer = {
+    data: null,
     options,
 
     set (message, politeness) {
-      if (this.data) {
-        this.reset()
-        if (politeness) {
-          this.data.politeness = politeness
-        }
-        draf(() => {
-          this.data.content = message
-        })
+      if (!this.data) return
+      this.reset()
+      if (politeness) {
+        this.data.politeness = politeness
       }
+      draf(() => {
+        this.data.content = message
+      })
     },
 
     reset () {
-      this.data = Object.assign(this.data, {
-        content: '',
-        politeness: this.options.politeness
-      })
+      this.data.content = ''
+      this.data.politeness = this.options.politeness
     },
 
     setComplementRoute (complementRoute) {
       if (typeof complementRoute !== 'string') return
       options.complementRoute = complementRoute
-    },
-
-    data: null
+    }
   }
 
   // If set the router, will be announced the change of route
   if (router) {
     router.afterEach(to => {
-      draf(() => { // Resolves the problem of getting the correct title when the meta announcer is not passed
-        const announcer = to.meta.announcer || {}
+      const announcer = to.meta.announcer || {}
+
+      // Skip: Used, for example, when an async title exists, in which case the announcement is made manually by the set method.
+      // It is also possible to achieve the same result, using politeness: 'off', but it will be necessary 
+      // to set the "assertive" or "polite" when using the set method.
+      // for example: this.$announcer.set('my async title', 'polite')
+      if (announcer.skip) return
+
+      // draf: Resolves the problem of getting the correct document.title when the meta announcer is not passed
+      // Tested on Vuepress
+      draf(() => {
         const msg = announcer.message || document.title.trim()
         const complement = announcer.complementRoute || options.complementRoute
         const politeness = announcer.politeness || null