Docs: Install and config vue-announcer in theme-default

Author: ktquez

docs/.vuepress/components/GlobalLayout.vue

@@ -0,0 +1,20 @@
+<template>
+  <div id="global-layout">
+    <VueAnnouncer />
+    <component :is="layout"/>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    layout () {
+      if (this.$page.path) {
+        if (this.$frontmatter.layout) return this.$frontmatter.layout
+        return 'Layout'
+      }
+      return 'NotFound'
+    }
+  }
+}
+</script>

docs/.vuepress/config.js

@@ -1,7 +1,7 @@
 module.exports = {
   title: 'Vue announcer',
   description: '',
-  serviceWorker: true,  
+  serviceWorker: true,
   themeConfig: {
     home: false,
     repo: 'vue-a11y/vue-announcer',

docs/.vuepress/enhanceApp.js

@@ -0,0 +1,7 @@
+import VueAnnouncer from '../../dist/vue-announcer.esm'
+
+export default ({ Vue, router, isServer }) => {
+  if (!isServer) {
+    Vue.use(VueAnnouncer, {}, router)
+  }
+}

docs/.vuepress/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+  globalLayout: './components/GlobalLayout'
+}

docs/demos/README.md

@@ -3,7 +3,7 @@
 <iframe
     src="https://codesandbox.io/embed/vue-announcer-vue-project-z049t?fontsize=14&hidenavigation=1&theme=dark&view=editor"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-    title="vue-announcer-vue-project"
+    title="example vue-announcer to vue.js projects"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 ></iframe>

docs/demos/nuxt.md

@@ -44,9 +44,9 @@ In your `layouts/default.vue`
 <iframe
   src="https://codesandbox.io/embed/vue-announcer-nuxt-project-breih?fontsize=14&hidenavigation=1&module=%2Fplugins%2Fvue-announcer.js&theme=dark&view=editor"
   style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-  title="vue-announcer-nuxt-project"
+  title="example vue-announcer to nuxt.js projects"
   allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 ></iframe>
 
-   <a href="https://codesandbox.io/s/vue-announcer-nuxt-project-breih" target="_blank" rel="noopener">Open sandbox example</a>
+<a href="https://codesandbox.io/s/vue-announcer-nuxt-project-breih" target="_blank" rel="noopener">Open sandbox example</a>

docs/demos/vuepress.md

@@ -1,3 +1,7 @@
+---
+title: Example of how to use in a Vuepress application
+---
+
 # Vuepress
 
 ### Coming soon