use new features to update title

88be9dd8 · Evan You · 19df1dcc · 88be9dd8 · 88be9dd8 · 88be9dd8
Commit 88be9dd8 authored Apr 19, 2017 by Evan You
7 changed files
--- a/server.js
+++ b/server.js
@@ -28,7 +28,8 @@ function createRenderer (bundle, options) {
    }),
    // this is only needed when vue-server-renderer is npm-linked
    basedir: resolve('./dist'),
-    directMode: true
+    // recommended for performance
+    runInNewContext: false
  }))
 }

--- a/src/index.template.html
+++ b/src/index.template.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
+    <title>{{ title || 'Vue HN 2.0' }}</title>
    <meta charset="utf-8">
-    <title>Vue HN 2.0</title>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <link rel="shortcut icon" sizes="48x48" href="/public/logo-48.png">

--- a/src/util/set-title.js
+++ b/src/util/set-title.js
+export function setTitle (title, context) {
+  title = `Vue HN 2.0 | ${title}`
+  if (context) {
+    // server
+    context.title = title
+  } else {
+    // client
+    document.title = title
+  }
+}
--- a/src/views/CreateListView.js
+++ b/src/views/CreateListView.js
-import ItemList from '../components/ItemList.vue'
+import ItemList from './ItemList.vue'
 // This is a factory function for dynamically creating root-level list views,
 // since they share most of the logic except for the type of items to display.

--- a/src/components/ItemList.vue
+++ b/src/components/ItemList.vue
@@ -20,9 +20,12 @@
 </template>
 <script>
-import Spinner from './Spinner.vue'
-import Item from './Item.vue'
 import { watchList } from '../api'
+import { setTitle } from '../util/set-title'
+import Item from '../components/Item.vue'
+import Spinner from '../components/Spinner.vue'
+const camelize = str => str.charAt(0).toUpperCase() + str.slice(1)
 export default {
  name: 'item-list',
@@ -59,7 +62,12 @@ export default {
    }
  },
+  serverRendered (context) {
+    setTitle(camelize(this.type), context)
+  },
  beforeMount () {
+    setTitle(camelize(this.type))
    if (this.$root._isMounted) {
      this.loadItems(this.page)
    }

--- a/src/views/ItemView.vue
+++ b/src/views/ItemView.vue
@@ -28,6 +28,7 @@
 </template>
 <script>
+import { setTitle } from '../util/set-title'
 import Spinner from '../components/Spinner.vue'
 import Comment from '../components/Comment.vue'
@@ -48,13 +49,6 @@ function fetchComments (store, item) {
  }
 }
-function fetchItemAndComments (store) {
-  return fetchItem(store).then(() => {
-    const { items, route } = store.state
-    return fetchComments(store, items[route.params.id])
-  })
-}
 export default {
  name: 'item-view',
  components: { Spinner, Comment },
@@ -70,11 +64,17 @@ export default {
  },
  // on the server, only fetch the item itself
  preFetch: fetchItem,
-  // on the client, fetch everything
+  serverRendered (context) {
+    setTitle(this.item.title, context)
+  },
+  // on the client, fetch item + comments
  beforeMount () {
-    fetchItemAndComments(this.$store).then(() => {
+    fetchItem(this.$store).then(() => {
+      setTitle(this.item.title)
+      fetchComments(this.$store, this.item).then(() => {
        this.loading = false
      })
+    })
  }
 }
 </script>

--- a/src/views/UserView.vue
+++ b/src/views/UserView.vue
@@ -17,6 +17,7 @@
 </template>
 <script>
+import { setTitle } from '../util/set-title'
 import Spinner from '../components/Spinner.vue'
 function fetchUser (store) {
@@ -34,8 +35,13 @@ export default {
    }
  },
  preFetch: fetchUser,
+  serverRendered (context) {
+    setTitle(this.user.id, context)
+  },
  beforeMount () {
-    fetchUser(this.$store)
+    fetchUser(this.$store).then(() => {
+      setTitle(this.user.id)
+    })
  }
 }
 </script>