Announce route changes issues

[antiantivirus]

So whilst having issues with getting nuxt to work (seperate issue here) I decided to roll my own and was having a look through source code at how this is achieved here on vue-announcer.

setTimeout(() => {
        draf(() => {
          const msg = announcer.message || document.title.trim()
          const complement = announcer.complementRoute || options.complementRoute
          const politeness = announcer.politeness || null
          Vue.prototype.$announcer.set(`${msg} ${complement}`, politeness)
        })
      }, 500)

Trying out this code on my nuxt project didn't work initially. Increasing the timing on setTimeout to 550 works. However this got me thinking that this solution might not work across all devices as document.title might not have been updated in the given time on slower computers.

My current solution to solve this is to use nuxt-route-meta to add the page title to the route property so it's accessible after every route change, and not relying on a timeout. Using the code below in the default layout works in announcing the new page

  watch: {
    $route: function(to) {
      // 🚨 $nextTick = DOM updated, route successfully transitioned
      this.$nextTick(() => {
        const msg = 'Navigated to '
        const pageTitle = to.meta.title
        this.$announcer.set(msg + pageTitle, 'assertive')
      });
    }
  }

Before this I had been working on a solution using the store to save the new page title on every route change. This also worked but needed the nuxt-route-meta plugin too.