|
|
import Vue from 'vue' import { compile } from '../utils'
import NuxtError from './nuxt-error.vue'
import NuxtChild from './nuxt-child'
export default { name: 'Nuxt', components: { NuxtChild, NuxtError }, props: { nuxtChildKey: { type: String, default: undefined }, keepAlive: Boolean, keepAliveProps: { type: Object, default: undefined }, name: { type: String, default: 'default' } }, errorCaptured (error) { // if we receive and error while showing the NuxtError component
// capture the error and force an immediate update so we re-render
// without the NuxtError component
if (this.displayingNuxtError) { this.errorFromNuxtError = error this.$forceUpdate() } }, computed: { routerViewKey () { // If nuxtChildKey prop is given or current route has children
if (typeof this.nuxtChildKey !== 'undefined' || this.$route.matched.length > 1) { return this.nuxtChildKey || compile(this.$route.matched[0].path)(this.$route.params) }
const [matchedRoute] = this.$route.matched
if (!matchedRoute) { return this.$route.path }
const Component = matchedRoute.components.default
if (Component && Component.options) { const { options } = Component
if (options.key) { return (typeof options.key === 'function' ? options.key(this.$route) : options.key) } }
const strict = /\/$/.test(matchedRoute.path) return strict ? this.$route.path : this.$route.path.replace(/\/$/, '') } }, beforeCreate () { Vue.util.defineReactive(this, 'nuxt', this.$root.$options.nuxt) }, render (h) { // if there is no error
if (!this.nuxt.err) { // Directly return nuxt child
return h('NuxtChild', { key: this.routerViewKey, props: this.$props }) }
// if an error occured within NuxtError show a simple
// error message instead to prevent looping
if (this.errorFromNuxtError) { this.$nextTick(() => (this.errorFromNuxtError = false))
return h('div', {}, [ h('h2', 'An error occured while showing the error page'), h('p', 'Unfortunately an error occured and while showing the error page another error occured'), h('p', `Error details: ${this.errorFromNuxtError.toString()}`), h('nuxt-link', { props: { to: '/' } }, 'Go back to home') ]) }
// track if we are showing the NuxtError component
this.displayingNuxtError = true this.$nextTick(() => (this.displayingNuxtError = false))
return h(NuxtError, { props: { error: this.nuxt.err } }) } }
|