improved accessibilty: page title

src/App.vue

@@ -1,7 +1,13 @@
 <template>
   <div id="root">
     <header role="banner">
-      <h1>Les Guides de Paris</h1>
+      <h1
+        tabindex="0"
+        @click="closePost()"
+        @keydown.enter="closePost()"
+      >
+        Les Guides de Paris
+      </h1>
     </header>
     <section class="container center-content">
       <RouterView />
@@ -10,6 +16,25 @@
   </div>
 </template>
 
+<script>
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  metaInfo: {
+    // if no subcomponents specify a metaInfo.title, this title will be used
+    title: 'Home',
+    // all titles will be injected into this template
+    titleTemplate: '%s | Guides de Paris'
+  },
+  computed: mapState({
+    opened: state => state.posts.opened
+  }),
+  methods: mapActions('posts', [
+    'closePost'
+  ])
+}
+</script>
+
 <style lang="stylus" scoped>
 
 .container

src/components/Home/Posts.vue

@@ -5,22 +5,25 @@
     <a
       href="#"
       @click="closePost()"
-      @keydown.enter="openPost(post)"
-      >
-      close</a>
+      @keydown.enter="closePost()"
+    >
+      close
+    </a>
   </section>
   <ul v-else>
     <li
       v-for="post in posts"
       :key="post.id"
-      >
+    >
       <h2>
         <a
           :href="'#post-'+post.id"
           @click="openPost(post)"
           @keydown.enter="openPost(post)"
-          >
-          {{ post.title }}</a></h2>
+        >
+          {{ post.title }}
+        </a>
+      </h2>
     </li>
   </ul>
 </template>
@@ -33,12 +36,17 @@ export default {
     opened: state => state.posts.opened,
     posts: state => state.posts.all
   }),
+  created () {
+    this.$store.dispatch('posts/getAllPosts')
+  },
   methods: mapActions('posts', [
     'openPost',
     'closePost'
   ]),
-  created () {
-    this.$store.dispatch('posts/getAllPosts')
+  metaInfo () {
+    return {
+      title: this.opened !== null ? this.opened.title : 'home'
+    }
   }
 }
 </script>

src/index.js

@@ -1,9 +1,12 @@
 import Vue from 'vue'
 import router from './router'
 import store from './store'
+import Meta from 'vue-meta'
 import App from './App'
 import 'assets/css/app.styl'
 
+Vue.use(Meta)
+
 new Vue({
   router,
   store,