'use strict' require('es6-object-assign').polyfill() import 'es6-promise/auto' import Vue from 'vue' import { app, router<%= (store ? ', store' : '') %> } from './index' import { getMatchedComponents, getMatchedComponentsInstances, flatMapComponents, getContext, promisify, getLocation, compile } from './utils' const noopData = () => { return {} } const noopFetch = () => {} let _lastPaths = [] let _lastComponentsFiles = [] function mapTransitions(Components, to, from) { return Components.map((Component) => { let transition = Component.options.transition if (typeof transition === 'function') { return transition(to, from) } return transition }) } function loadAsyncComponents (to, ___, next) { const resolveComponents = flatMapComponents(to, (Component, _, match, key) => { if (typeof Component === 'function' && !Component.options) { return new Promise(function (resolve, reject) { const _resolve = (Component) => { if (!Component.options) { Component = Vue.extend(Component) // fix issue #6 Component._Ctor = Component } else { Component._Ctor = Component Component.extendOptions = Component.options } match.components[key] = Component resolve(Component) } Component().then(_resolve).catch(reject) }) } if (typeof Component === 'object' && !Component.options) { // Updated via vue-router resolveAsyncComponents() Component = Vue.extend(Component) Component._Ctor = Component match.components[key] = Component } return Component }) <%= (loading ? 'this.$loading.start && this.$loading.start()' : '') %> Promise.all(resolveComponents) .then(() => next()) .catch((err) => { this.error({ statusCode: 500, message: err.message }) next(false) }) } function render (to, from, next) { let Components = getMatchedComponents(to) if (!Components.length) { // Default layout this.setLayout() .then(() => { this.error({ statusCode: 404, message: 'This page could not be found.', url: to.path }) return next() }) return } // Update ._data and other properties if hot reloaded Components.forEach(function (Component) { if (!Component._data) { Component._data = Component.options.data || noopData } if (Component._Ctor && Component._Ctor.options) { Component.options.fetch = Component._Ctor.options.fetch if (Component._dataFn) { const originalDataFn = Component._data.toString().replace(/\s/g, '') const dataFn = Component._dataFn const newDataFn = (Component._Ctor.options.data || noopData).toString().replace(/\s/g, '') // If component data method changed if (newDataFn !== originalDataFn && newDataFn !== dataFn) { Component._data = Component._Ctor.options.data || noopData } } } }) this.setTransitions(mapTransitions(Components, to, from)) this.error() let nextCalled = false // Set layout this.setLayout(Components[0].options.layout) .then(() => { // Pass validation? let isValid = true Components.forEach((Component) => { if (!isValid) return if (typeof Component.options.validate !== 'function') return isValid = Component.options.validate({ params: to.params || {}, query: to.query || {} }) }) if (!isValid) { this.error({ statusCode: 404, message: 'This page could not be found.', url: to.path }) return next() } return Promise.all(Components.map((Component, i) => { // Check if only children route changed Component._path = compile(to.matched[i].path)(to.params) if (Component._path === _lastPaths[i] && (i + 1) !== Components.length) { return Promise.resolve() } let promises = [] const _next = function (path) { <%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %> nextCalled = true next(path) } const context = getContext({ to<%= (store ? ', store' : '') %>, isClient: true, next: _next.bind(this), error: this.error.bind(this) }) // Validate method if (Component._data && typeof Component._data === 'function') { var promise = promisify(Component._data, context) promise.then((data) => { Component._cData = () => data || {} Component.options.data = Component._cData Component._dataFn = Component.options.data.toString().replace(/\s/g, '') if (Component._Ctor && Component._Ctor.options) { Component._Ctor.options.data = Component.options.data } <%= (loading ? 'this.$loading.increase && this.$loading.increase(30)' : '') %> }) promises.push(promise) } if (Component.options.fetch) { var p = Component.options.fetch(context) if (!(p instanceof Promise)) { p = Promise.resolve(p) } <%= (loading ? 'p.then(() => this.$loading.increase && this.$loading.increase(30))' : '') %> promises.push(p) } return Promise.all(promises) })) }) .then(() => { _lastPaths = Components.map((Component, i) => compile(to.matched[i].path)(to.params)) <%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %> // If not redirected if (!nextCalled) { next() } }) .catch((error) => { _lastPaths = [] this.error(error) next(false) }) } // When navigating on a different route but the same component is used, Vue.js // will not update the instance data, so we have to update $data ourselves function fixPrepatch (to, ___) { Vue.nextTick(() => { let instances = getMatchedComponentsInstances(to) _lastComponentsFiles = instances.map((instance, i) => { if (!instance) return ''; if (_lastPaths[i] === instance.constructor._path && typeof instance.constructor.options.data === 'function') { let newData = instance.constructor.options.data() for (let key in newData) { Vue.set(instance.$data, key, newData[key]) } } return instance.constructor.options.__file }) hotReloadAPI(this) }) } // Special hot reload with data(context) function hotReloadAPI (_app) { if (!module.hot) return const $nuxt = _app.$nuxt var _forceUpdate = $nuxt.$forceUpdate.bind($nuxt) $nuxt.$forceUpdate = function () { let Component = getMatchedComponents(router.currentRoute)[0] if (!Component) return _forceUpdate() if (typeof Component === 'object' && !Component.options) { // Updated via vue-router resolveAsyncComponents() Component = Vue.extend(Component) Component._Ctor = Component } let promises = [] // If layout changed if (_app.layoutName !== Component.options.layout) { let promise = _app.setLayout(Component.options.layout) promise.then(() => { hotReloadAPI(_app) }) promises.push(promise) } const next = function (path) { <%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %> router.push(path) } const context = getContext({ route: router.currentRoute<%= (store ? ', store' : '') %>, isClient: true, next: next.bind(this), error: _app.error }) // Check if data has been updated const originalDataFn = (Component._data || noopData).toString().replace(/\s/g, '') const newDataFn = (Component._Ctor.options.data || noopData).toString().replace(/\s/g, '') if (originalDataFn !== newDataFn) { Component._data = Component._Ctor.options.data || noopData let p = promisify(Component._data, context) p.then((data) => { Component._cData = () => data || {} Component.options.data = Component._cData Component._dataFn = Component.options.data.toString().replace(/\s/g, '') Component._Ctor.options.data = Component.options.data <%= (loading ? 'this.$loading.increase && this.$loading.increase(30)' : '') %> }) promises.push(p) } else if (Component._cData) { Component._data = Component.options.data Component.options.data = Component._cData Component._Ctor.options.data = Component.options.data } // Check if fetch has been updated const originalFetchFn = (Component.options.fetch || noopFetch).toString().replace(/\s/g, '') const newFetchFn = (Component._Ctor.options.fetch || noopFetch).toString().replace(/\s/g, '') // Fetch has been updated, we call it to update the store if (originalFetchFn !== newFetchFn) { Component.options.fetch = Component._Ctor.options.fetch || noopFetch let p = Component.options.fetch(context) if (!(p instanceof Promise)) { p = Promise.resolve(p) } <%= (loading ? 'p.then(() => this.$loading.increase && this.$loading.increase(30))' : '') %> promises.push(p) } if (!promises.length) return; <%= (loading ? 'this.$loading.start && this.$loading.start()' : '') %> return Promise.all(promises).then(() => { <%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %> _forceUpdate() }) } } // Load vue app const NUXT = window.__NUXT__ || {} if (!NUXT) { throw new Error('[nuxt.js] cannot find the global variable __NUXT__, make sure the server is working.') } // Get matched components const path = getLocation(router.options.base) const resolveComponents = flatMapComponents(router.match(path), (Component, _, match, key, index) => { if (typeof Component === 'function' && !Component.options) { return new Promise(function (resolve, reject) { const _resolve = (Component) => { if (!Component.options) { Component = Vue.extend(Component) // fix issue #6 Component._Ctor = Component } else { Component._Ctor = Component Component.extendOptions = Component.options } if (Component.options.data && typeof Component.options.data === 'function') { Component._data = Component.options.data if (NUXT.serverRendered) { Component._cData = () => NUXT.data[index] || {} Component.options.data = Component._cData Component._dataFn = Component.options.data.toString().replace(/\s/g, '') } if (Component._Ctor && Component._Ctor.options) { Component._Ctor.options.data = Component.options.data } } match.components[key] = Component resolve(Component) } Component().then(_resolve).catch(reject) }) } return Component }) function nuxtReady (app) { window._nuxtReadyCbs.forEach((cb) => { if (typeof cb === 'function') { cb(app) } }) // Add router hooks router.afterEach(function (to, from) { app.$nuxt.$emit('routeChanged', to, from) }) } Promise.all(resolveComponents) .then((Components) => { const _app = new Vue(app) return _app.setLayout(Components.length ? Components[0].options.layout : '') .then(() => { return { _app, Components } }) }) .then(({ _app, Components }) => { const mountApp = () => { _app.$mount('#__nuxt') <% if (loading) { %> // Special loading bar _app.$loading = _app.$nuxt.$loading <% } %> // Hot reloading hotReloadAPI(_app) // Call window.onNuxtReady callbacks Vue.nextTick(() => nuxtReady(_app)) } <% if (store) { %> // Replace store state if (NUXT.state) { store.replaceState(NUXT.state) } <% } %> _app.setTransitions = _app.$options._nuxt.setTransitions.bind(_app) if (Components.length) { _app.setTransitions(mapTransitions(Components, router.currentRoute)) _lastPaths = router.currentRoute.matched.map((route) => compile(route.path)(router.currentRoute.params)) _lastComponentsFiles = Components.map((Component) => Component.options.__file) } _app.error = _app.$options._nuxt.error.bind(_app) _app.$loading = {} // to avoid error while _app.$nuxt does not exist if (NUXT.error) _app.error(NUXT.error) // Add router hooks router.beforeEach(loadAsyncComponents.bind(_app)) router.beforeEach(render.bind(_app)) router.afterEach(fixPrepatch.bind(_app)) if (NUXT.serverRendered) { mountApp() return } render.call(_app, router.currentRoute, router.currentRoute, function (path) { if (path) { let mounted = false router.afterEach(function () { if (mounted) return mounted = true mountApp() }) router.push(path) return } mountApp() }) }) .catch((err) => { console.error('[nuxt.js] Cannot load components', err) // eslint-disable-line no-console })