simplify the getters where repetitive

.nuxt/client.js

@@ -386,6 +386,9 @@ function fixPrepatch (to, ___) {
     this.setLayout(layout)
 
 
+    // Hot reloading
+    setTimeout(() => hotReloadAPI(this), 100)
+
   })
 }
 
@@ -406,6 +409,99 @@ function nuxtReady (app) {
 }
 
 
+// Special hot reload with asyncData(context)
+function hotReloadAPI (_app) {
+  if (!module.hot) return
+
+  let $components = []
+  let $nuxt = _app.$nuxt
+
+  while ($nuxt && $nuxt.$children && $nuxt.$children.length) {
+    $nuxt.$children.forEach((child, i) => {
+      if (child.$vnode.data.nuxtChild) {
+        let hasAlready = false
+        $components.forEach(component => {
+          if (component.$options.__file === child.$options.__file) {
+            hasAlready = true
+          }
+        })
+        if (!hasAlready) {
+          $components.push(child)
+        }
+      }
+      $nuxt = child
+    })
+  }
+
+  $components.forEach(addHotReload.bind(_app))
+}
+
+function addHotReload ($component, depth) {
+  if ($component.$vnode.data._hasHotReload) return
+  $component.$vnode.data._hasHotReload = true
+
+  var _forceUpdate = $component.$forceUpdate.bind($component.$parent)
+
+  $component.$vnode.context.$forceUpdate = () => {
+    let Components = getMatchedComponents(router.currentRoute)
+    let Component = Components[depth]
+    if (!Component) return _forceUpdate()
+    if (typeof Component === 'object' && !Component.options) {
+      // Updated via vue-router resolveAsyncComponents()
+      Component = Vue.extend(Component)
+      Component._Ctor = Component
+    }
+    this.error()
+    let promises = []
+    const next = function (path) {
+      this.$loading.finish && this.$loading.finish()
+      router.push(path)
+    }
+    let context = getContext({ route: router.currentRoute, store, isClient: true, isHMR: true, next: next.bind(this), error: this.error }, app)
+    this.$loading.start && this.$loading.start()
+    callMiddleware.call(this, Components, context)
+    .then(() => {
+      // If layout changed
+      if (depth !== 0) return Promise.resolve()
+      let layout = Component.options.layout || 'default'
+      if (typeof layout === 'function') {
+        layout = layout(context)
+      }
+      if (this.layoutName === layout) return Promise.resolve()
+      let promise = this.loadLayout(layout)
+      promise.then(() => {
+        this.setLayout(layout)
+        Vue.nextTick(() => hotReloadAPI(this))
+      })
+      return promise
+    })
+    .then(() => {
+      return callMiddleware.call(this, Components, context, this.layout)
+    })
+    .then(() => {
+      // Call asyncData(context)
+      let pAsyncData = promisify(Component.options.asyncData || noopData, context)
+      pAsyncData.then((asyncDataResult) => {
+        applyAsyncData(Component, asyncDataResult)
+        this.$loading.increase && this.$loading.increase(30)
+      })
+      promises.push(pAsyncData)
+      // Call fetch()
+      Component.options.fetch = Component.options.fetch || noopFetch
+      let pFetch = Component.options.fetch(context)
+      if (!pFetch || (!(pFetch instanceof Promise) && (typeof pFetch.then !== 'function'))) { pFetch = Promise.resolve(pFetch) }
+      pFetch.then(() => this.$loading.increase && this.$loading.increase(30))
+      promises.push(pFetch)
+      return Promise.all(promises)
+    })
+    .then(() => {
+      this.$loading.finish && this.$loading.finish()
+      _forceUpdate()
+      setTimeout(() => hotReloadAPI(this), 100)
+    })
+  }
+}
+
 
 async function mountApp(__app) {
   // Set global variables
@@ -433,6 +529,9 @@ async function mountApp(__app) {
       // Call window.onNuxtReady callbacks
       nuxtReady(_app)
 
+      // Enable hot reloading
+      hotReloadAPI(_app)
+
     })
   }
 

.nuxt/components/nuxt-error.vue

@@ -8,6 +8,8 @@
     <nuxt-link class="error-link" to="/">Back to the home page</nuxt-link>
   </p>
 
+  <p class="description" v-else>An error occurred while rendering the page. Check developer tools console for details.</p>
+
 
   <div class="logo">
     <a href="https://nuxtjs.org" target="_blank" rel="noopener">Nuxt.js</a>
@@ -32,6 +34,26 @@ export default {
     }
   },
   
+  // Only on debug mode
+  data () {
+    return {
+      mounted: false
+    }
+  },
+  mounted () {
+    this.mounted = true
+  },
+  created () {
+    console.error(this.error)
+  },
+  watch: {
+    error(newErr) {
+      if(newErr) {
+        console.error(newErr)
+      }
+    }
+  },
+  
   computed: {
     statusCode () {
       return (this.error && this.error.statusCode) || 500