mirror of https://github.com/rancher/dashboard.git
864 lines
24 KiB
JavaScript
864 lines
24 KiB
JavaScript
import Vue from 'vue';
|
|
import fetch from 'unfetch';
|
|
import middleware from '../config/middleware.js';
|
|
import {
|
|
applyAsyncData,
|
|
promisify,
|
|
middlewareSeries,
|
|
sanitizeComponent,
|
|
resolveRouteComponents,
|
|
getMatchedComponents,
|
|
getMatchedComponentsInstances,
|
|
flatMapComponents,
|
|
setContext,
|
|
compile,
|
|
getQueryDiff,
|
|
globalHandleError,
|
|
isSamePath,
|
|
urlJoin
|
|
} from '../utils/nuxt.js';
|
|
import { createApp, NuxtError } from './index.js';
|
|
import fetchMixin from '../mixins/fetch.client';
|
|
import NuxtLink from '../components/nuxt/nuxt-link.client.js'; // should be included after ./index.js
|
|
|
|
// Fetch mixin
|
|
if (!Vue.__nuxt__fetch__mixin__) {
|
|
Vue.mixin(fetchMixin);
|
|
Vue.__nuxt__fetch__mixin__ = true;
|
|
}
|
|
|
|
// Component: <NuxtLink>
|
|
Vue.component(NuxtLink.name, NuxtLink);
|
|
Vue.component('NLink', NuxtLink);
|
|
|
|
if (!global.fetch) {
|
|
global.fetch = fetch;
|
|
}
|
|
|
|
// Global shared references
|
|
let _lastPaths = [];
|
|
let app;
|
|
let router;
|
|
|
|
// Try to rehydrate SSR data from window
|
|
const NUXT = window.__NUXT__ || {};
|
|
|
|
const $config = nuxt.publicRuntimeConfig || {}; // eslint-disable-line no-undef
|
|
|
|
if ($config._app) {
|
|
__webpack_public_path__ = urlJoin($config._app.cdnURL, $config._app.assetsPath); // eslint-disable-line camelcase, no-undef
|
|
}
|
|
|
|
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); // eslint-disable-line no-console
|
|
logs.forEach((logObj) => (console[logObj.type] || console.log)(...logObj.args)); // eslint-disable-line no-console
|
|
delete NUXT.logs;
|
|
console.groupEnd && console.groupEnd(); // eslint-disable-line no-console
|
|
}
|
|
|
|
// 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); // eslint-disable-line no-console
|
|
} else {
|
|
console.error(err.message || err); // eslint-disable-line no-console
|
|
}
|
|
};
|
|
Vue.config.$nuxt = {};
|
|
}
|
|
Vue.config.$nuxt.$nuxt = true;
|
|
|
|
const errorHandler = Vue.config.errorHandler || console.error; // eslint-disable-line no-console
|
|
|
|
// Create and mount App
|
|
createApp(null, nuxt.publicRuntimeConfig).then(mountApp).catch(errorHandler); // eslint-disable-line no-undef
|
|
|
|
function componentOption(component, key, ...args) {
|
|
if (!component || !component.options || !component.options[key]) {
|
|
return {};
|
|
}
|
|
const option = component.options[key];
|
|
|
|
if (typeof option === 'function') {
|
|
return option(...args);
|
|
}
|
|
|
|
return option;
|
|
}
|
|
|
|
function mapTransitions(toComponents, to, from) {
|
|
const componentTransitions = (component) => {
|
|
const transition = componentOption(component, 'transition', to, from) || {};
|
|
|
|
return (typeof transition === 'string' ? { name: transition } : transition);
|
|
};
|
|
|
|
const fromComponents = from ? getMatchedComponents(from) : [];
|
|
const maxDepth = Math.max(toComponents.length, fromComponents.length);
|
|
|
|
const mergedTransitions = [];
|
|
|
|
for (let i = 0; i < maxDepth; i++) {
|
|
// Clone original objects to prevent overrides
|
|
const toTransitions = Object.assign({}, componentTransitions(toComponents[i]));
|
|
const transitions = Object.assign({}, componentTransitions(fromComponents[i]));
|
|
|
|
// Combine transitions & prefer `leave` properties of "from" route
|
|
Object.keys(toTransitions)
|
|
.filter((key) => typeof toTransitions[key] !== 'undefined' && !key.toLowerCase().includes('leave'))
|
|
.forEach((key) => {
|
|
transitions[key] = toTransitions[key];
|
|
});
|
|
|
|
mergedTransitions.push(transitions);
|
|
}
|
|
|
|
return mergedTransitions;
|
|
}
|
|
|
|
async function loadAsyncComponents(to, from, next) {
|
|
// Check if route changed (this._routeChanged), only if the page is not an error (for validate())
|
|
this._routeChanged = Boolean(app.nuxt.err) || from.name !== to.name;
|
|
this._paramChanged = !this._routeChanged && from.path !== to.path;
|
|
this._queryChanged = !this._paramChanged && from.fullPath !== to.fullPath;
|
|
this._diffQuery = (this._queryChanged ? getQueryDiff(to.query, from.query) : []);
|
|
|
|
if ((this._routeChanged || this._paramChanged) && this.$loading.start && !this.$loading.manual) {
|
|
this.$loading.start();
|
|
}
|
|
|
|
try {
|
|
if (this._queryChanged) {
|
|
const Components = await resolveRouteComponents(
|
|
to,
|
|
(Component, instance) => ({ Component, instance })
|
|
);
|
|
// Add a marker on each component that it needs to refresh or not
|
|
const startLoader = Components.some(({ Component, instance }) => {
|
|
const watchQuery = Component.options.watchQuery;
|
|
|
|
if (watchQuery === true) {
|
|
return true;
|
|
}
|
|
if (Array.isArray(watchQuery)) {
|
|
return watchQuery.some((key) => this._diffQuery[key]);
|
|
}
|
|
if (typeof watchQuery === 'function') {
|
|
return watchQuery.apply(instance, [to.query, from.query]);
|
|
}
|
|
|
|
return false;
|
|
});
|
|
|
|
if (startLoader && this.$loading.start && !this.$loading.manual) {
|
|
this.$loading.start();
|
|
}
|
|
}
|
|
// Call next()
|
|
next();
|
|
} catch (error) {
|
|
const err = error || {};
|
|
const statusCode = err.statusCode || err.status || (err.response && err.response.status) || 500;
|
|
const message = err.message || '';
|
|
|
|
// Handle chunk loading errors
|
|
// This may be due to a new deployment or a network problem
|
|
if (/^Loading( CSS)? chunk (\d)+ failed\./.test(message)) {
|
|
window.location.reload(true /* skip cache */);
|
|
|
|
return; // prevent error page blinking for user
|
|
}
|
|
|
|
this.error({ statusCode, message });
|
|
this.$nuxt.$emit('routeChanged', to, from, err);
|
|
next();
|
|
}
|
|
}
|
|
|
|
function applySSRData(Component, ssrData) {
|
|
if (NUXT.serverRendered && ssrData) {
|
|
applyAsyncData(Component, ssrData);
|
|
}
|
|
|
|
Component._Ctor = Component;
|
|
|
|
return Component;
|
|
}
|
|
|
|
// Get matched components
|
|
function resolveComponents(route) {
|
|
return flatMapComponents(route, async(Component, _, match, key, index) => {
|
|
// If component is not resolved yet, resolve it
|
|
if (typeof Component === 'function' && !Component.options) {
|
|
Component = await Component();
|
|
}
|
|
// Sanitize it and save it
|
|
const _Component = applySSRData(sanitizeComponent(Component), NUXT.data ? NUXT.data[index] : null);
|
|
|
|
match.components[key] = _Component;
|
|
|
|
return _Component;
|
|
});
|
|
}
|
|
|
|
function callMiddleware(Components, context, layout) {
|
|
let midd = ['i18n'];
|
|
let unknownMiddleware = false;
|
|
|
|
// If layout is undefined, only call global middleware
|
|
if (typeof layout !== 'undefined') {
|
|
midd = []; // Exclude global middleware if layout defined (already called before)
|
|
layout = sanitizeComponent(layout);
|
|
if (layout.options.middleware) {
|
|
midd = midd.concat(layout.options.middleware);
|
|
}
|
|
Components.forEach((Component) => {
|
|
if (Component.options.middleware) {
|
|
midd = midd.concat(Component.options.middleware);
|
|
}
|
|
});
|
|
}
|
|
|
|
midd = midd.map((name) => {
|
|
if (typeof name === 'function') {
|
|
return name;
|
|
}
|
|
if (typeof middleware[name] !== 'function') {
|
|
unknownMiddleware = true;
|
|
this.error({ statusCode: 500, message: `Unknown middleware ${ name }` });
|
|
}
|
|
|
|
return middleware[name];
|
|
});
|
|
|
|
if (unknownMiddleware) {
|
|
return;
|
|
}
|
|
|
|
return middlewareSeries(midd, context);
|
|
}
|
|
|
|
async function render(to, from, next) {
|
|
if (this._routeChanged === false && this._paramChanged === false && this._queryChanged === false) {
|
|
return next();
|
|
}
|
|
|
|
if (to === from) {
|
|
_lastPaths = [];
|
|
} else {
|
|
const fromMatches = [];
|
|
|
|
_lastPaths = getMatchedComponents(from, fromMatches).map((Component, i) => {
|
|
return compile(from.matched[fromMatches[i]].path)(from.params);
|
|
});
|
|
}
|
|
|
|
// nextCalled is true when redirected
|
|
let nextCalled = false;
|
|
const _next = (path) => {
|
|
if (from.path === path.path && this.$loading.finish) {
|
|
this.$loading.finish();
|
|
}
|
|
|
|
if (from.path !== path.path && this.$loading.pause) {
|
|
this.$loading.pause();
|
|
}
|
|
|
|
if (nextCalled) {
|
|
return;
|
|
}
|
|
|
|
nextCalled = true;
|
|
next(path);
|
|
};
|
|
|
|
// Update context
|
|
await setContext(app, {
|
|
route: to,
|
|
from,
|
|
next: _next.bind(this)
|
|
});
|
|
this._dateLastError = app.nuxt.dateErr;
|
|
this._hadError = Boolean(app.nuxt.err);
|
|
|
|
// Get route's matched components
|
|
const matches = [];
|
|
const Components = getMatchedComponents(to, matches);
|
|
|
|
// If no Components matched, generate 404
|
|
if (!Components.length) {
|
|
// Default layout
|
|
await callMiddleware.call(this, Components, app.context);
|
|
if (nextCalled) {
|
|
return;
|
|
}
|
|
|
|
// Load layout for error page
|
|
const errorLayout = (NuxtError.options || NuxtError).layout;
|
|
const layout = await this.loadLayout(
|
|
typeof errorLayout === 'function' ? errorLayout.call(NuxtError, app.context) : errorLayout
|
|
);
|
|
|
|
await callMiddleware.call(this, Components, app.context, layout);
|
|
if (nextCalled) {
|
|
return;
|
|
}
|
|
|
|
// Show error page
|
|
app.context.error({ statusCode: 404, message: 'This page could not be found' });
|
|
|
|
return next();
|
|
}
|
|
|
|
// Update ._data and other properties if hot reloaded
|
|
Components.forEach((Component) => {
|
|
if (Component._Ctor && Component._Ctor.options) {
|
|
Component.options.asyncData = Component._Ctor.options.asyncData;
|
|
Component.options.fetch = Component._Ctor.options.fetch;
|
|
}
|
|
});
|
|
|
|
// Apply transitions
|
|
this.setTransitions(mapTransitions(Components, to, from));
|
|
|
|
try {
|
|
// Call middleware
|
|
await callMiddleware.call(this, Components, app.context);
|
|
if (nextCalled) {
|
|
return;
|
|
}
|
|
if (app.context._errored) {
|
|
return next();
|
|
}
|
|
|
|
// Set layout
|
|
let layout = Components[0].options.layout;
|
|
|
|
if (typeof layout === 'function') {
|
|
layout = layout(app.context);
|
|
}
|
|
layout = await this.loadLayout(layout);
|
|
|
|
// Call middleware for layout
|
|
await callMiddleware.call(this, Components, app.context, layout);
|
|
if (nextCalled) {
|
|
return;
|
|
}
|
|
if (app.context._errored) {
|
|
return next();
|
|
}
|
|
|
|
// Call .validate()
|
|
let isValid = true;
|
|
|
|
try {
|
|
for (const Component of Components) {
|
|
if (typeof Component.options.validate !== 'function') {
|
|
continue;
|
|
}
|
|
|
|
isValid = await Component.options.validate(app.context);
|
|
|
|
if (!isValid) {
|
|
break;
|
|
}
|
|
}
|
|
} catch (validationError) {
|
|
// ...If .validate() threw an error
|
|
this.error({
|
|
statusCode: validationError.statusCode || '500',
|
|
message: validationError.message
|
|
});
|
|
|
|
return next();
|
|
}
|
|
|
|
// ...If .validate() returned false
|
|
if (!isValid) {
|
|
this.error({ statusCode: 404, message: 'This page could not be found' });
|
|
|
|
return next();
|
|
}
|
|
|
|
let instances;
|
|
|
|
// Call asyncData & fetch hooks on components matched by the route.
|
|
await Promise.all(Components.map((Component, i) => {
|
|
// Check if only children route changed
|
|
Component._path = compile(to.matched[matches[i]].path)(to.params);
|
|
Component._dataRefresh = false;
|
|
const childPathChanged = Component._path !== _lastPaths[i];
|
|
|
|
// Refresh component (call asyncData & fetch) when:
|
|
// Route path changed part includes current component
|
|
// Or route param changed part includes current component and watchParam is not `false`
|
|
// Or route query is changed and watchQuery returns `true`
|
|
if (this._routeChanged && childPathChanged) {
|
|
Component._dataRefresh = true;
|
|
} else if (this._paramChanged && childPathChanged) {
|
|
const watchParam = Component.options.watchParam;
|
|
|
|
Component._dataRefresh = watchParam !== false;
|
|
} else if (this._queryChanged) {
|
|
const watchQuery = Component.options.watchQuery;
|
|
|
|
if (watchQuery === true) {
|
|
Component._dataRefresh = true;
|
|
} else if (Array.isArray(watchQuery)) {
|
|
Component._dataRefresh = watchQuery.some((key) => this._diffQuery[key]);
|
|
} else if (typeof watchQuery === 'function') {
|
|
if (!instances) {
|
|
instances = getMatchedComponentsInstances(to);
|
|
}
|
|
Component._dataRefresh = watchQuery.apply(instances[i], [to.query, from.query]);
|
|
}
|
|
}
|
|
if (!this._hadError && this._isMounted && !Component._dataRefresh) {
|
|
return;
|
|
}
|
|
|
|
const promises = [];
|
|
|
|
const hasAsyncData = (
|
|
Component.options.asyncData &&
|
|
typeof Component.options.asyncData === 'function'
|
|
);
|
|
|
|
const hasFetch = Boolean(Component.options.fetch) && Component.options.fetch.length;
|
|
|
|
const loadingIncrease = (hasAsyncData && hasFetch) ? 30 : 45;
|
|
|
|
// Call asyncData(context)
|
|
if (hasAsyncData) {
|
|
const promise = promisify(Component.options.asyncData, app.context);
|
|
|
|
promise.then((asyncDataResult) => {
|
|
applyAsyncData(Component, asyncDataResult);
|
|
|
|
if (this.$loading.increase) {
|
|
this.$loading.increase(loadingIncrease);
|
|
}
|
|
});
|
|
promises.push(promise);
|
|
}
|
|
|
|
// Check disabled page loading
|
|
this.$loading.manual = Component.options.loading === false;
|
|
|
|
// Call fetch(context)
|
|
if (hasFetch) {
|
|
let p = Component.options.fetch(app.context);
|
|
|
|
if (!p || (!(p instanceof Promise) && (typeof p.then !== 'function'))) {
|
|
p = Promise.resolve(p);
|
|
}
|
|
p.then((fetchResult) => {
|
|
if (this.$loading.increase) {
|
|
this.$loading.increase(loadingIncrease);
|
|
}
|
|
});
|
|
promises.push(p);
|
|
}
|
|
|
|
return Promise.all(promises);
|
|
}));
|
|
|
|
// If not redirected
|
|
if (!nextCalled) {
|
|
if (this.$loading.finish && !this.$loading.manual) {
|
|
this.$loading.finish();
|
|
}
|
|
|
|
next();
|
|
}
|
|
} catch (err) {
|
|
const error = err || {};
|
|
|
|
if (error.message === 'ERR_REDIRECT') {
|
|
return this.$nuxt.$emit('routeChanged', to, from, error);
|
|
}
|
|
_lastPaths = [];
|
|
|
|
globalHandleError(error);
|
|
|
|
// Load error layout
|
|
let layout = (NuxtError.options || NuxtError).layout;
|
|
|
|
if (typeof layout === 'function') {
|
|
layout = layout(app.context);
|
|
}
|
|
await this.loadLayout(layout);
|
|
|
|
this.error(error);
|
|
this.$nuxt.$emit('routeChanged', to, from, error);
|
|
next();
|
|
}
|
|
}
|
|
|
|
// Fix components format in matched, it's due to code-splitting of vue-router
|
|
function normalizeComponents(to, ___) {
|
|
flatMapComponents(to, (Component, _, match, key) => {
|
|
if (typeof Component === 'object' && !Component.options) {
|
|
// Updated via vue-router resolveAsyncComponents()
|
|
Component = Vue.extend(Component);
|
|
Component._Ctor = Component;
|
|
match.components[key] = Component;
|
|
}
|
|
|
|
return Component;
|
|
});
|
|
}
|
|
|
|
function setLayoutForNextPage(to) {
|
|
// Set layout
|
|
let hasError = Boolean(this.$options.nuxt.err);
|
|
|
|
if (this._hadError && this._dateLastError === this.$options.nuxt.dateErr) {
|
|
hasError = false;
|
|
}
|
|
let layout = hasError ? (NuxtError.options || NuxtError).layout : to.matched[0].components.default.options.layout;
|
|
|
|
if (typeof layout === 'function') {
|
|
layout = layout(app.context);
|
|
}
|
|
|
|
this.setLayout(layout);
|
|
}
|
|
|
|
function checkForErrors(app) {
|
|
// Hide error component if no error
|
|
if (app._hadError && app._dateLastError === app.$options.nuxt.dateErr) {
|
|
app.error();
|
|
}
|
|
}
|
|
|
|
// 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, ___) {
|
|
if (this._routeChanged === false && this._paramChanged === false && this._queryChanged === false) {
|
|
return;
|
|
}
|
|
|
|
const instances = getMatchedComponentsInstances(to);
|
|
const Components = getMatchedComponents(to);
|
|
|
|
let triggerScroll = false;
|
|
|
|
Vue.nextTick(() => {
|
|
instances.forEach((instance, i) => {
|
|
if (!instance || instance._isDestroyed) {
|
|
return;
|
|
}
|
|
|
|
if (
|
|
instance.constructor._dataRefresh &&
|
|
Components[i] === instance.constructor &&
|
|
instance.$vnode.data.keepAlive !== true &&
|
|
typeof instance.constructor.options.data === 'function'
|
|
) {
|
|
const newData = instance.constructor.options.data.call(instance);
|
|
|
|
for (const key in newData) {
|
|
Vue.set(instance.$data, key, newData[key]);
|
|
}
|
|
|
|
triggerScroll = true;
|
|
}
|
|
});
|
|
|
|
if (triggerScroll) {
|
|
// Ensure to trigger scroll event after calling scrollBehavior
|
|
window.$nuxt.$nextTick(() => {
|
|
window.$nuxt.$emit('triggerScroll');
|
|
});
|
|
}
|
|
|
|
checkForErrors(this);
|
|
|
|
// Hot reloading
|
|
setTimeout(() => hotReloadAPI(this), 100);
|
|
});
|
|
}
|
|
|
|
function nuxtReady(_app) {
|
|
window.onNuxtReadyCbs.forEach((cb) => {
|
|
if (typeof cb === 'function') {
|
|
cb(_app);
|
|
}
|
|
});
|
|
// Special JSDOM
|
|
if (typeof window._onNuxtLoaded === 'function') {
|
|
window._onNuxtLoaded(_app);
|
|
}
|
|
// Add router hooks
|
|
router.afterEach((to, from) => {
|
|
// Wait for fixPrepatch + $data updates
|
|
Vue.nextTick(() => _app.$nuxt.$emit('routeChanged', to, from));
|
|
});
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
const $components = getNuxtChildComponents(_app.$nuxt, []);
|
|
|
|
$components.forEach(addHotReload.bind(_app));
|
|
}
|
|
|
|
function addHotReload($component, depth) {
|
|
if ($component.$vnode.data._hasHotReload) {
|
|
return;
|
|
}
|
|
$component.$vnode.data._hasHotReload = true;
|
|
|
|
const _forceUpdate = $component.$forceUpdate.bind($component.$parent);
|
|
|
|
$component.$vnode.context.$forceUpdate = async() => {
|
|
const 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();
|
|
const 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;
|
|
}
|
|
const 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)
|
|
const 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;
|
|
router = __app.router;
|
|
|
|
// Create Vue instance
|
|
const _app = new Vue(app);
|
|
|
|
// Mounts Vue app to DOM element
|
|
const mount = () => {
|
|
_app.$mount('#app');
|
|
|
|
// Add afterEach router hooks
|
|
router.afterEach(normalizeComponents);
|
|
|
|
router.afterEach(setLayoutForNextPage.bind(_app));
|
|
|
|
router.afterEach(fixPrepatch.bind(_app));
|
|
|
|
// Listen for first Vue update
|
|
Vue.nextTick(() => {
|
|
// Call window.{{globals.readyCallback}} callbacks
|
|
nuxtReady(_app);
|
|
|
|
// Enable hot reloading
|
|
hotReloadAPI(_app);
|
|
});
|
|
};
|
|
|
|
// Resolve route components
|
|
const Components = await Promise.all(resolveComponents(app.context.route));
|
|
|
|
// Enable transitions
|
|
_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));
|
|
}
|
|
|
|
// Initialize error handler
|
|
_app.$loading = {}; // To avoid error while _app.$nuxt does not exist
|
|
if (NUXT.error) {
|
|
_app.error(NUXT.error);
|
|
}
|
|
|
|
// Add beforeEach router hooks
|
|
router.beforeEach(loadAsyncComponents.bind(_app));
|
|
router.beforeEach(render.bind(_app));
|
|
|
|
// Fix in static: remove trailing slash to force hydration
|
|
// Full static, if server-rendered: hydrate, to allow custom redirect to generated page
|
|
|
|
// Fix in static: remove trailing slash to force hydration
|
|
if (NUXT.serverRendered && isSamePath(NUXT.routePath, _app.context.route.path)) {
|
|
return mount();
|
|
}
|
|
|
|
// First render on client-side
|
|
const clientFirstMount = () => {
|
|
normalizeComponents(router.currentRoute, router.currentRoute);
|
|
setLayoutForNextPage.call(_app, router.currentRoute);
|
|
checkForErrors(_app);
|
|
// Don't call fixPrepatch.call(_app, router.currentRoute, router.currentRoute) since it's first render
|
|
mount();
|
|
};
|
|
|
|
// fix: force next tick to avoid having same timestamp when an error happen on spa fallback
|
|
await new Promise((resolve) => setTimeout(resolve, 0));
|
|
render.call(_app, router.currentRoute, router.currentRoute, (path) => {
|
|
// If not redirected
|
|
if (!path) {
|
|
clientFirstMount();
|
|
|
|
return;
|
|
}
|
|
|
|
// Add a one-time afterEach hook to
|
|
// mount the app wait for redirect and route gets resolved
|
|
const unregisterHook = router.afterEach((to, from) => {
|
|
unregisterHook();
|
|
clientFirstMount();
|
|
});
|
|
|
|
// Push the path and let route to be resolved
|
|
router.push(path, undefined, (err) => {
|
|
if (err) {
|
|
errorHandler(err);
|
|
}
|
|
});
|
|
});
|
|
}
|