Set title according to current view

frontend/.eslintrc.js

@@ -9,7 +9,8 @@ module.exports = {
   ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'standard/no-callback-literal': 'off'
   },
   parserOptions: {
     parser: 'babel-eslint'

frontend/src/api-client.js

@@ -17,7 +17,7 @@ export default {
     })
   },
 
-  listVolumes (series, callback) {
+  getSeriesInfo (series, callback) {
     apiRequest(`series/${series}`, info => {
       info.volumes = info.volumes.map(volume => {
         volume.thumbnail = `${apiBase}/volume/${volume.id}/cover/thumbnail`

frontend/src/router.js

@@ -1,29 +1,49 @@
-import Vue from 'vue'
+import API from '@/api-client.js'
+import Reader from './views/Reader.vue'
 import Router from 'vue-router'
 import SeriesList from './views/SeriesList.vue'
 import VolumeList from './views/VolumeList.vue'
-import Reader from './views/Reader.vue'
+import Vue from 'vue'
 
 Vue.use(Router)
 
-export default new Router({
+const router = new Router({
   mode: 'history',
   base: process.env.BASE_URL,
   routes: [
     {
       path: '/',
       name: 'series-list',
-      component: SeriesList
+      component: SeriesList,
+      meta: {
+        title: (to, callback) => callback('Home')
+      }
     },
     {
       path: '/series/:id',
       name: 'volume-list',
-      component: VolumeList
+      component: VolumeList,
+      meta: {
+        title: (to, callback) => API.getSeriesInfo(to.params.id, info => callback(info.title))
+      }
     },
     {
       path: '/volume/:id',
       name: 'reader',
-      component: Reader
+      component: Reader,
+      meta: {
+        title: (to, callback) => API.getVolumeInfo(to.params.id, info => callback(info.title))
+      }
     }
   ]
 })
+
+// https://github.com/vuejs/vue-router/issues/914#issuecomment-261461921
+router.beforeEach((to, from, next) => {
+  to.meta.title(to, (title) => {
+    document.title = `${title} – Manga Reader`
+  })
+  next()
+})
+
+export default router

frontend/src/views/VolumeList.vue

@@ -25,7 +25,7 @@ export default {
     }
   },
   mounted () {
-    API.listVolumes(this.$route.params.id, info => (this.info = info))
+    API.getSeriesInfo(this.$route.params.id, info => (this.info = info))
   }
 }
 </script>