add titles

pages/_type/_page.vue

@@ -33,6 +33,11 @@
     components: {
       Item
     },
+    head() {
+      return {
+        title: camelize(this.$route.params.type)
+      }
+    },
     data() {
       return {
         transition: 'slide-right',

pages/item/_id.vue

@@ -10,7 +10,8 @@
         </span>
         <p class="meta">
           {{ item.score }} points
-          | by <router-link :to="'/user/' + item.by">{{ item.by }}</router-link>
+          | by
+          <router-link :to="'/user/' + item.by">{{ item.by }}</router-link>
           {{ item.time | timeAgo }} ago
         </p>
       </div>
@@ -33,14 +34,20 @@
 
   export default {
     name: 'item-view',
-    components: { Spinner, Comment },
+    components: {Spinner, Comment},
 
     data: () => ({
       loading: true
     }),
 
+    head() {
+      return {
+        title: this.item.title
+      }
+    },
+
     computed: {
-      item () {
+      item() {
         return this.$store.state.items[this.$route.params.id]
       }
     },
@@ -48,16 +55,12 @@
     // We only fetch the item itself before entering the view, because
     // it might take a long time to load threads with hundreds of comments
     // due to how the HN Firebase API works.
-    asyncData ({ store, route: { params: { id }}}) {
-      return store.dispatch('FETCH_ITEMS', { ids: [id] })
-    },
-
-    title () {
-      return this.item.title
+    asyncData({store, route: {params: {id}}}) {
+      return store.dispatch('FETCH_ITEMS', {ids: [id]})
     },
 
     // Fetch comments when mounted on the client
-    beforeMount () {
+    beforeMount() {
       this.fetchComments()
     },
 
@@ -67,7 +70,7 @@
     },
 
     methods: {
-      fetchComments () {
+      fetchComments() {
         this.loading = true
         fetchComments(this.$store, this.item).then(() => {
           this.loading = false
@@ -77,7 +80,7 @@
   }
 
   // recursively fetch all descendent comments
-  function fetchComments (store, item) {
+  function fetchComments(store, item) {
     if (item && item.kids) {
       return store.dispatch('FETCH_ITEMS', {
         ids: item.kids
@@ -92,7 +95,7 @@
   .item-view-header
     background-color #fff
     padding 1.8em 2em 1em
-    box-shadow 0 1px 2px rgba(0,0,0,.1)
+    box-shadow 0 1px 2px rgba(0, 0, 0, .1)
     h1
       display inline
       font-size 1.5em

pages/user/_id.vue

@@ -20,43 +20,43 @@
 
 <script>
 
-export default {
-  name: 'user-view',
+  export default {
+    name: 'user-view',
 
-  computed: {
-    user () {
-      return this.$store.state.users[this.$route.params.id]
-    }
-  },
+    computed: {
+      user() {
+        return this.$store.state.users[this.$route.params.id]
+      }
+    },
 
-  asyncData ({ store, route: { params: { id }}}) {
-    return store.dispatch('FETCH_USER', { id })
-  },
+    head() {
+      return {
+        title: this.user.id || 'User not found'
+      }
+    },
 
-  title () {
-    return this.user
-      ? this.user.id
-      : 'User not found'
+    fetch({store, route: {params: {id}}}) {
+      return store.dispatch('FETCH_USER', {id})
+    },
   }
-}
 </script>
 
 <style lang="stylus">
-.user-view
-  background-color #fff
-  box-sizing border-box
-  padding 2em 3em
-  h1
-    margin 0
-    font-size 1.5em
-  .meta
-    list-style-type none
-    padding 0
-  .label
-    display inline-block
-    min-width 4em
-  .about
-    margin 1em 0
-  .links a
-    text-decoration underline
+  .user-view
+    background-color #fff
+    box-sizing border-box
+    padding 2em 3em
+    h1
+      margin 0
+      font-size 1.5em
+    .meta
+      list-style-type none
+      padding 0
+    .label
+      display inline-block
+      min-width 4em
+    .about
+      margin 1em 0
+    .links a
+      text-decoration underline
 </style>