update

.nuxt/App.js

@@ -4,12 +4,13 @@ import { decode, parsePath, withoutBase, withoutTrailingSlash, normalizeURL } fr
 import { getMatchedComponentsInstances, getChildrenComponentInstancesUsingFetch, promisify, globalHandleError, urlJoin, sanitizeComponent } from './utils'
 import NuxtError from './components/nuxt-error.vue'
 import NuxtLoading from './components/nuxt-loading.vue'
+import NuxtBuildIndicator from './components/nuxt-build-indicator'
 
-import '../assets/css/tailwind.css'
+import '..\\assets\\css\\tailwind.css'
 
-import '../node_modules/prismjs/themes/prism.css'
+import '..\\node_modules\\prismjs\\themes\\prism.css'
 
-import _6f6c098b from '../layouts/default.vue'
+import _6f6c098b from '..\\layouts\\default.vue'
 
 const layouts = { "_default": sanitizeComponent(_6f6c098b) }
 
@@ -46,7 +47,7 @@ export default {
       }
     }, [
       loadingEl,
-
+      h(NuxtBuildIndicator),
       transitionEl
     ])
   },
@@ -84,15 +85,6 @@ export default {
 
   async mounted () {
     this.$loading = this.$refs.loading
-
-    if (this.isPreview) {
-      if (this.$store && this.$store._actions.nuxtServerInit) {
-        this.$loading.start()
-        await this.$store.dispatch('nuxtServerInit', this.context)
-      }
-      await this.refresh()
-      this.$loading.finish()
-    }
   },
 
   watch: {
@@ -195,6 +187,10 @@ export default {
     },
 
     setLayout (layout) {
+      if(layout && typeof layout !== 'string') {
+        throw new Error('[nuxt] Avoid using non-string value as layout property.')
+      }
+
       if (!layout || !layouts['_' + layout]) {
         layout = 'default'
       }
@@ -208,47 +204,6 @@ export default {
       }
       return Promise.resolve(layouts['_' + layout])
     },
-
-    getRouterBase() {
-      return withoutTrailingSlash(this.$router.options.base)
-    },
-    getRoutePath(route = '/') {
-      const base = this.getRouterBase()
-      return withoutTrailingSlash(withoutBase(parsePath(route).pathname, base))
-    },
-    getStaticAssetsPath(route = '/') {
-      const { staticAssetsBase } = window.__NUXT__
-
-      return urlJoin(staticAssetsBase, this.getRoutePath(route))
-    },
-
-      async fetchStaticManifest() {
-      return window.__NUXT_IMPORT__('manifest.js', normalizeURL(urlJoin(this.getStaticAssetsPath(), 'manifest.js')))
-    },
-
-    setPagePayload(payload) {
-      this._pagePayload = payload
-      this._fetchCounters = {}
-    },
-    async fetchPayload(route, prefetch) {
-      const path = decode(this.getRoutePath(route))
-
-      const manifest = await this.fetchStaticManifest()
-      if (!manifest.routes.includes(path)) {
-        if (!prefetch) { this.setPagePayload(false) }
-        throw new Error(`Route ${path} is not pre-rendered`)
-      }
-
-      const src = urlJoin(this.getStaticAssetsPath(route), 'payload.js')
-      try {
-        const payload = await window.__NUXT_IMPORT__(path, normalizeURL(src))
-        if (!prefetch) { this.setPagePayload(payload) }
-        return payload
-      } catch (err) {
-        if (!prefetch) { this.setPagePayload(false) }
-        throw err
-      }
-    }
   },
 
   components: {

.nuxt/client.js

@@ -21,9 +21,6 @@ import {
 import { createApp, NuxtError } from './index.js'
 import fetchMixin from './mixins/fetch.client'
 import NuxtLink from './components/nuxt-link.client.js' // should be included after ./index.js
-import { installJsonp } from './jsonp'
-
-installJsonp()
 
 // Fetch mixin
 if (!Vue.__nuxt__fetch__mixin__) {
@@ -50,7 +47,66 @@ if ($config._app) {
   __webpack_public_path__ = urlJoin($config._app.cdnURL, $config._app.assetsPath)
 }
 
-Object.assign(Vue.config, {"silent":true,"performance":false})
+Object.assign(Vue.config, {"silent":false,"performance":true})
+
+const logs = NUXT.logs || []
+  if (logs.length > 0) {
+  const ssrLogStyle = 'background: #2E495E;border-radius: 0.5em;color: white;font-weight: bold;padding: 2px 0.5em;'
+  console.group && console.group ('%cNuxt SSR', ssrLogStyle)
+  logs.forEach(logObj => (console[logObj.type] || console.log)(...logObj.args))
+  delete NUXT.logs
+  console.groupEnd && console.groupEnd()
+}
+
+// Setup global Vue error handler
+if (!Vue.config.$nuxt) {
+  const defaultErrorHandler = Vue.config.errorHandler
+  Vue.config.errorHandler = async (err, vm, info, ...rest) => {
+    // Call other handler if exist
+    let handled = null
+    if (typeof defaultErrorHandler === 'function') {
+      handled = defaultErrorHandler(err, vm, info, ...rest)
+    }
+    if (handled === true) {
+      return handled
+    }
+
+    if (vm && vm.$root) {
+      const nuxtApp = Object.keys(Vue.config.$nuxt)
+        .find(nuxtInstance => vm.$root[nuxtInstance])
+
+      // Show Nuxt Error Page
+      if (nuxtApp && vm.$root[nuxtApp].error && info !== 'render function') {
+        const currentApp = vm.$root[nuxtApp]
+
+        // Load error layout
+        let layout = (NuxtError.options || NuxtError).layout
+        if (typeof layout === 'function') {
+          layout = layout(currentApp.context)
+        }
+        if (layout) {
+          await currentApp.loadLayout(layout).catch(() => {})
+        }
+        currentApp.setLayout(layout)
+
+        currentApp.error(err)
+      }
+    }
+
+    if (typeof defaultErrorHandler === 'function') {
+      return handled
+    }
+
+    // Log to console
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(err)
+    } else {
+      console.error(err.message || err)
+    }
+  }
+  Vue.config.$nuxt = {}
+}
+Vue.config.$nuxt.$nuxt = true
 
 const errorHandler = Vue.config.errorHandler || console.error
 
@@ -393,15 +449,7 @@ async function render (to, from, next) {
 
       // Call asyncData(context)
       if (hasAsyncData) {
-          let promise
-
-          if (this.isPreview || spaFallback) {
-            promise = promisify(Component.options.asyncData, app.context)
-          } else {
-              promise = this.fetchPayload(to.path)
-                .then(payload => payload.data[i])
-                .catch(_err => promisify(Component.options.asyncData, app.context)) // Fallback
-          }
+        const promise = promisify(Component.options.asyncData, app.context)
 
         promise.then((asyncDataResult) => {
           applyAsyncData(Component, asyncDataResult)
@@ -416,11 +464,6 @@ async function render (to, from, next) {
       // Check disabled page loading
       this.$loading.manual = Component.options.loading === false
 
-        if (!this.isPreview && !spaFallback) {
-          // Catching the error here for letting the SPA fallback and normal fetch behaviour
-          promises.push(this.fetchPayload(to.path).catch(err => null))
-        }
-
       // Call fetch(context)
       if (hasFetch) {
         let p = Component.options.fetch(app.context)
@@ -546,6 +589,9 @@ function fixPrepatch (to, ___) {
     }
 
     checkForErrors(this)
+
+    // Hot reloading
+    setTimeout(() => hotReloadAPI(this), 100)
   })
 }
 
@@ -566,6 +612,117 @@ function nuxtReady (_app) {
   })
 }
 
+const noopData = () => { return {} }
+const noopFetch = () => {}
+
+// Special hot reload with asyncData(context)
+function getNuxtChildComponents ($parent, $components = []) {
+  $parent.$children.forEach(($child) => {
+    if ($child.$vnode && $child.$vnode.data.nuxtChild && !$components.find(c =>(c.$options.__file === $child.$options.__file))) {
+      $components.push($child)
+    }
+    if ($child.$children && $child.$children.length) {
+      getNuxtChildComponents($child, $components)
+    }
+  })
+
+  return $components
+}
+
+function hotReloadAPI(_app) {
+  if (!module.hot) return
+
+  let $components = getNuxtChildComponents(_app.$nuxt, [])
+
+  $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 = async () => {
+    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)
+    }
+    await setContext(app, {
+      route: router.currentRoute,
+      isHMR: true,
+      next: next.bind(this)
+    })
+    const context = app.context
+
+    if (this.$loading.start && !this.$loading.manual) {
+      this.$loading.start()
+    }
+
+    callMiddleware.call(this, Components, context)
+    .then(() => {
+      // If layout changed
+      if (depth !== 0) {
+        return
+      }
+
+      let layout = Component.options.layout || 'default'
+      if (typeof layout === 'function') {
+        layout = layout(context)
+      }
+      if (this.layoutName === layout) {
+        return
+      }
+      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.length && 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
   app = __app.app
@@ -574,14 +731,6 @@ async function mountApp (__app) {
   // Create Vue instance
   const _app = new Vue(app)
 
-  // Load page chunk
-  if (!NUXT.data && NUXT.serverRendered) {
-    try {
-      const payload = await _app.fetchPayload(NUXT.routePath || _app.context.route.path)
-      Object.assign(NUXT, payload)
-    } catch (err) {}
-  }
-
   // Load layout
   const layout = NUXT.layout || 'default'
   await _app.loadLayout(layout)
@@ -602,6 +751,9 @@ async function mountApp (__app) {
     Vue.nextTick(() => {
       // Call window.{{globals.readyCallback}} callbacks
       nuxtReady(_app)
+
+      // Enable hot reloading
+      hotReloadAPI(_app)
     })
   }
 
@@ -628,7 +780,8 @@ async function mountApp (__app) {
   // Fix in static: remove trailing slash to force hydration
   // Full static, if server-rendered: hydrate, to allow custom redirect to generated page
 
-  if (NUXT.serverRendered) {
+  // Fix in static: remove trailing slash to force hydration
+  if (NUXT.serverRendered && isSamePath(NUXT.routePath, _app.context.route.path)) {
     return mount()
   }