Nuxt.js layout mixin

mixin-layout.js

export default {

	head () {
		const page = (this.hasNuxtError ? 'error' : this.currentPage)

		return {

			// I have to do all of this here, since won't be combined
			bodyAttrs: {
				class: [
					'body-' + this.$options.name,
					'body-page-' + page
				].join(' ')
			}

		}
	},

	data () {
		return {
			hasNuxtError: false
		}
	},

	mounted () {
		this.$nuxt.$on('routeChanged', this.onRouteChange)
		setTimeout(this.onRouteChange, 1)
	},

	beforeDestroy () {
		this.$nuxt.$off('routeChanged', this.onRouteChange)
	},

	methods: {

		onRouteChange () {

			// This is not reactive, so we must manually look into it on route change
			if (this.$nuxt.nuxt.err && !this.hasNuxtError) {
				this.hasNuxtError = true

			} else if (!this.$nuxt.nuxt.err && this.hasNuxtError) {
				this.hasNuxtError = false
			}
		}

	}

}