vue-a11y/vue-announcer

no Server-Side Render support out of the box

dgirgenti opened this issue · 2 comments

dgirgenti commented

I would love to use this package in my SSR Vue app. However, simply following the instructions to Vue.use(VueAnnouncer) and placing a <VueAnnouncer /> in my App.vue completely bombs out the server side render with the following error:

[Vue warn]: Error in beforeCreate hook: "ReferenceError: document is not defined"

found in

---> <VueAnnouncer>
       <App> at src/modules/core/components/App.vue
         <Root>

Is there an example of using this plugin in an SSR app somewhere I can mimic? If not, is there intention of allowing this component to not do anything in the server render so it doesn't fail the build? I would be open to contributing the fix for this as well if I can figure it out shortly before deciding to roll my own announcer.

dgirgenti commented

Just to loop back (in case anyone stumbles upon this as well), I was able to get it working by doing the following:

  • Wrap the Vue.use(VueAnnouncer) within an if (process.env.VUE_ENV === 'client')
  • in App.vue:
    • Set data prop showAnnouncer to false
    • this.showAnnouncer = true; inside mounted()
    • <VueAnnouncer v-if="showAnnouncer" />
  • 👍1