Doc: Adding example Vue app

Author: ktquez

docs/.vuepress/config.js

@@ -33,7 +33,7 @@ module.exports = {
             ]
           },
           {
-            title: 'How to',
+            title: 'Examples',
             collapsable: false,
             children: [
               '/demos/',

docs/demos/README.md

@@ -1,3 +1,11 @@
-# Use in Vue
+# Vue app
 
-### Coming soon
+<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"
+    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-vue-project-z049t" target="_blank" rel="noopener">Open Sandbox example</a>

docs/demos/nuxt.md

@@ -1,3 +1,3 @@
-# Use in Nuxt.js
+# Nuxt.js
 
 ### Coming soon

docs/demos/vuepress.md

@@ -1,3 +1,3 @@
-# Use in Vuepress
+# Vuepress
 
 ### Coming soon

example/src/App.vue

@@ -1,23 +1,48 @@
 <template>
   <div id="app">
     <!-- data-va is used for internal testing, it is not required -->
-    <vue-announcer data-va="announcer"/>
+    <vue-announcer data-va="announcer" />
     <header>
-      <router-link to="/" title="Vue.js logo" aria-label="Go to home page">
-        <img src="./assets/logo.png" alt="Vue.js logo">
+      <router-link
+        to="/"
+        title="Vue.js logo"
+        aria-label="Go to home page"
+      >
+        <img
+          src="./assets/logo.png"
+          alt="Vue.js logo"
+        >
       </router-link>
       <h1>{{ msg }}</h1>
       <h2>Essential Links</h2>
       <nav>
         <ul>
           <li>
-            <router-link to="/posts/1" title="Go to post one page" aria-label="Go to example post page">My post</router-link>
+            <router-link
+              to="/posts/1"
+              title="Go to post one page"
+              aria-label="Go to example post page"
+            >
+              My post
+            </router-link>
           </li>
           <li>
-            <router-link to="/about" title="Go to about page" aria-label="Go to about page">About</router-link>
+            <router-link
+              to="/about"
+              title="Go to about page"
+              aria-label="Go to about page"
+            >
+              About
+            </router-link>
           </li>
           <li>
-            <router-link to="/contact" title="Go to contact page" aria-label="Go to contact page">Contact</router-link>
+            <router-link
+              to="/contact"
+              title="Go to contact page"
+              aria-label="Go to contact page"
+            >
+              Contact
+            </router-link>
           </li>
         </ul>
       </nav>
@@ -32,7 +57,7 @@
 
 <script>
 export default {
-  name: 'app',
+  name: 'App',
   data () {
     return {
       msg: 'Welcome to Your Vue.js App'