Nuxt/packages/vue-app/template/client.js

699 lines
21 KiB
JavaScript
Raw Normal View History

2016-11-07 01:34:58 +00:00
import Vue from 'vue'
import middleware from './middleware.js'
2017-07-27 14:26:36 +00:00
import {
2017-07-09 21:41:04 +00:00
applyAsyncData,
sanitizeComponent,
2017-10-16 08:40:08 +00:00
resolveRouteComponents,
2017-07-27 14:26:36 +00:00
getMatchedComponents,
2017-11-06 17:30:37 +00:00
getMatchedComponentsInstances,
2017-07-27 14:26:36 +00:00
flatMapComponents,
2017-10-16 08:40:08 +00:00
setContext,
2017-07-09 21:41:04 +00:00
middlewareSeries,
promisify,
getLocation,
2017-11-06 17:30:37 +00:00
compile,
getQueryDiff,
globalHandleError
} from './utils.js'
import { createApp, NuxtError } from './index.js'
import NuxtLink from './components/nuxt-link.<%= router.prefetchLinks ? "client" : "server" %>.js' // should be included after ./index.js
// Component: <NuxtLink>
Vue.component(NuxtLink.name, NuxtLink)
Vue.component('NLink', NuxtLink)
2017-08-05 21:33:46 +00:00
2017-07-09 21:41:04 +00:00
// Global shared references
let _lastPaths = []
let app
let router
2019-01-06 07:56:59 +00:00
<% if (store) { %>let store<%= isTest ? '// eslint-disable-line no-unused-vars' : '' %><% } %>
2017-07-09 21:41:04 +00:00
// Try to rehydrate SSR data from window
const NUXT = window.<%= globals.context %> || {}
2017-07-09 21:41:04 +00:00
2018-10-24 13:46:06 +00:00
Object.assign(Vue.config, <%= serialize(vue.config) %>)<%= isTest ? '// eslint-disable-line' : '' %>
<% if (debug) { %>
// Setup global Vue error handler
if (!Vue.config.$nuxt) {
const defaultErrorHandler = Vue.config.errorHandler
Vue.config.errorHandler = (err, vm, info, ...rest) => {
// Call other handler if exist
let handled = null
if (typeof defaultErrorHandler === 'function') {
handled = defaultErrorHandler(err, vm, info, ...rest)
}
2018-10-24 13:46:06 +00:00
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') {
vm.$root[nuxtApp].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.<%= globals.nuxt %> = true
<% } %>
const errorHandler = Vue.config.errorHandler || console.error
2017-07-09 21:41:04 +00:00
// Create and mount App
createApp()
2018-10-24 13:46:06 +00:00
.then(mountApp)
.catch((err) => {
err.message = '[nuxt] Error while mounting app: ' + err.message
errorHandler(err)
2018-10-24 13:46:06 +00:00
})
2017-07-09 21:41:04 +00:00
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
}
2017-05-02 06:57:39 +00:00
function mapTransitions(Components, to, from) {
const componentTransitions = (component) => {
const transition = componentOption(component, 'transition', to, from) || {}
return (typeof transition === 'string' ? { name: transition } : transition)
}
2017-07-27 14:26:36 +00:00
return Components.map((Component) => {
// Clone original object to prevent overrides
const transitions = Object.assign({}, componentTransitions(Component))
2017-07-27 14:26:36 +00:00
// Combine transitions & prefer `leave` transitions of 'from' route
if (from && from.matched.length && from.matched[0].components.default) {
2018-10-24 13:46:06 +00:00
const fromTransitions = componentTransitions(from.matched[0].components.default)
Object.keys(fromTransitions)
.filter(key => fromTransitions[key] && key.toLowerCase().includes('leave'))
.forEach((key) => { transitions[key] = fromTransitions[key] })
}
2017-07-27 14:26:36 +00:00
return transitions
})
}
2016-11-07 01:34:58 +00:00
2018-10-24 13:46:06 +00:00
async function loadAsyncComponents(to, from, next) {
// Check if route path changed (this._pathChanged), only if the page is not an error (for validate())
this._pathChanged = !!app.nuxt.err || from.path !== to.path
2017-11-06 17:30:37 +00:00
this._queryChanged = JSON.stringify(to.query) !== JSON.stringify(from.query)
this._diffQuery = (this._queryChanged ? getQueryDiff(to.query, from.query) : [])
2017-07-27 14:26:36 +00:00
2017-07-09 21:41:04 +00:00
<% if (loading) { %>
if (this._pathChanged && this.$loading.start && !this.$loading.manual) {
2017-10-16 08:40:08 +00:00
this.$loading.start()
2017-01-29 06:49:36 +00:00
}
2017-07-09 21:41:04 +00:00
<% } %>
try {
2017-11-06 17:30:37 +00:00
const Components = await resolveRouteComponents(to)
<% if (loading) { %>
if (!this._pathChanged && this._queryChanged) {
// Add a marker on each component that it needs to refresh or not
const startLoader = Components.some((Component) => {
const watchQuery = Component.options.watchQuery
if (watchQuery === true) return true
if (Array.isArray(watchQuery)) {
2018-10-24 13:46:06 +00:00
return watchQuery.some(key => this._diffQuery[key])
2017-11-06 17:30:37 +00:00
}
return false
})
if (startLoader && this.$loading.start && !this.$loading.manual) {
2017-11-06 17:30:37 +00:00
this.$loading.start()
}
}
<% } %>
// Call next()
2017-07-09 21:41:04 +00:00
next()
2019-01-06 07:56:59 +00:00
} 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 chunk (\d)+ failed\./.test(message)) {
window.location.reload(true /* skip cache */)
2018-09-29 13:13:48 +00:00
return // prevent error page blinking for user
}
this.error({ statusCode, message })
this.<%= globals.nuxt %>.$emit('routeChanged', to, from, err)
next()
2017-07-09 21:41:04 +00:00
}
}
2017-09-07 12:17:53 +00:00
function applySSRData(Component, ssrData) {
if (NUXT.serverRendered && ssrData) {
2017-09-07 12:17:53 +00:00
applyAsyncData(Component, ssrData)
}
Component._Ctor = Component
return Component
}
2017-07-09 21:41:04 +00:00
// Get matched components
function resolveComponents(router) {
const path = getLocation(router.options.base, router.options.mode)
2017-07-27 14:26:36 +00:00
2017-10-16 08:40:08 +00:00
return flatMapComponents(router.match(path), async (Component, _, match, key, index) => {
// If component is not resolved yet, resolve it
if (typeof Component === 'function' && !Component.options) {
Component = await Component()
2017-07-09 21:41:04 +00:00
}
2017-10-16 08:40:08 +00:00
// Sanitize it and save it
const _Component = applySSRData(sanitizeComponent(Component), NUXT.data ? NUXT.data[index] : null)
match.components[key] = _Component
return _Component
2016-11-07 01:34:58 +00:00
})
}
2018-10-24 13:46:06 +00:00
function callMiddleware(Components, context, layout) {
let midd = <%= devalue(router.middleware) %><%= isTest ? '// eslint-disable-line' : '' %>
2017-03-17 17:02:58 +00:00
let unknownMiddleware = false
2017-07-27 14:26:36 +00:00
2017-07-09 21:41:04 +00:00
// If layout is undefined, only call global middleware
2017-03-17 17:02:58 +00:00
if (typeof layout !== 'undefined') {
2017-07-09 21:41:04 +00:00
midd = [] // Exclude global middleware if layout defined (already called before)
layout = sanitizeComponent(layout)
if (layout.options.middleware) {
midd = midd.concat(layout.options.middleware)
2017-02-03 14:09:27 +00:00
}
Components.forEach((Component) => {
2017-03-17 17:02:58 +00:00
if (Component.options.middleware) {
midd = midd.concat(Component.options.middleware)
}
})
}
2017-07-09 21:41:04 +00:00
midd = midd.map((name) => {
2017-11-03 16:14:05 +00:00
if (typeof name === 'function') return name
2017-02-03 14:09:27 +00:00
if (typeof middleware[name] !== 'function') {
2017-03-17 17:02:58 +00:00
unknownMiddleware = true
2017-02-03 14:09:27 +00:00
this.error({ statusCode: 500, message: 'Unknown middleware ' + name })
}
return middleware[name]
})
2017-07-27 14:26:36 +00:00
if (unknownMiddleware) return
2017-05-04 07:57:10 +00:00
return middlewareSeries(midd, context)
2017-02-03 14:09:27 +00:00
}
2018-10-24 13:46:06 +00:00
async function render(to, from, next) {
2017-11-06 17:30:37 +00:00
if (this._pathChanged === false && this._queryChanged === false) return next()
2018-05-04 08:32:26 +00:00
// Handle first render on SPA mode
if (to === from) _lastPaths = []
else {
const fromMatches = []
_lastPaths = getMatchedComponents(from, fromMatches).map((Component, i) => {
return compile(from.matched[fromMatches[i]].path)(from.params)
})
2018-05-04 08:32:26 +00:00
}
2017-07-09 21:41:04 +00:00
// nextCalled is true when redirected
2017-05-09 12:43:47 +00:00
let nextCalled = false
const _next = (path) => {
<% if (loading) { %>
if (from.path === path.path && this.$loading.finish) {
this.$loading.finish()
}
<% } %>
<% if (loading) { %>
if (from.path !== path.path && this.$loading.pause) {
this.$loading.pause()
}
<% } %>
2017-05-09 12:43:47 +00:00
if (nextCalled) return
2017-02-03 14:09:27 +00:00
nextCalled = true
next(path)
}
2017-07-27 14:26:36 +00:00
2017-07-09 21:41:04 +00:00
// Update context
await setContext(app, {
2017-10-16 08:40:08 +00:00
route: to,
2017-07-20 19:04:23 +00:00
from,
2017-10-16 08:40:08 +00:00
next: _next.bind(this)
})
this._dateLastError = app.nuxt.dateErr
this._hadError = !!app.nuxt.err
2017-07-09 21:41:04 +00:00
// Get route's matched components
2018-01-24 06:33:27 +00:00
const matches = []
const Components = getMatchedComponents(to, matches)
2017-07-09 21:41:04 +00:00
// If no Components matched, generate 404
2016-11-07 01:34:58 +00:00
if (!Components.length) {
2016-12-24 11:34:41 +00:00
// Default layout
2017-10-16 08:40:08 +00:00
await callMiddleware.call(this, Components, app.context)
if (nextCalled) return
2017-07-09 21:41:04 +00:00
// Load layout for error page
const layout = await this.loadLayout(
typeof NuxtError.layout === 'function'
? NuxtError.layout(app.context)
: NuxtError.layout
)
2017-10-31 17:32:42 +00:00
await callMiddleware.call(this, Components, app.context, layout)
if (nextCalled) return
2017-10-16 08:40:08 +00:00
// Show error page
2018-07-12 20:45:14 +00:00
app.context.error({ statusCode: 404, message: `<%= messages.error_404 %>` })
2017-05-09 12:43:47 +00:00
return next()
2016-11-07 01:34:58 +00:00
}
2017-07-27 14:26:36 +00:00
2016-11-07 01:34:58 +00:00
// Update ._data and other properties if hot reloaded
Components.forEach((Component) => {
2016-12-24 00:55:32 +00:00
if (Component._Ctor && Component._Ctor.options) {
2017-02-28 12:10:58 +00:00
Component.options.asyncData = Component._Ctor.options.asyncData
Component.options.fetch = Component._Ctor.options.fetch
2016-11-07 01:34:58 +00:00
}
})
2017-07-09 21:41:04 +00:00
// Apply transitions
this.setTransitions(mapTransitions(Components, to, from))
2017-07-09 21:41:04 +00:00
2017-05-09 12:43:47 +00:00
try {
2017-07-09 21:41:04 +00:00
// Call middleware
2017-10-16 08:40:08 +00:00
await callMiddleware.call(this, Components, app.context)
if (nextCalled) return
if (app.context._errored) return next()
2017-07-09 21:41:04 +00:00
// Set layout
let layout = Components[0].options.layout
2017-03-17 17:02:58 +00:00
if (typeof layout === 'function') {
2017-10-16 08:40:08 +00:00
layout = layout(app.context)
2017-03-17 17:02:58 +00:00
}
2017-05-09 12:43:47 +00:00
layout = await this.loadLayout(layout)
2017-07-09 21:41:04 +00:00
// Call middleware for layout
2017-10-16 08:40:08 +00:00
await callMiddleware.call(this, Components, app.context, layout)
if (nextCalled) return
if (app.context._errored) return next()
2017-07-27 14:26:36 +00:00
2017-07-09 21:41:04 +00:00
// Call .validate()
2016-12-24 11:34:41 +00:00
let isValid = true
2018-08-25 09:42:00 +00:00
try {
for (const Component of Components) {
if (typeof Component.options.validate !== 'function') {
continue
}
2018-08-25 09:42:00 +00:00
isValid = await Component.options.validate(app.context)
2018-08-25 09:42:00 +00:00
if (!isValid) {
break
}
}
} catch (validationError) {
// ...If .validate() threw an error
this.error({
statusCode: validationError.statusCode || '500',
message: validationError.message
})
return next()
}
2017-07-09 21:41:04 +00:00
// ...If .validate() returned false
2016-12-24 11:34:41 +00:00
if (!isValid) {
2018-07-12 20:45:14 +00:00
this.error({ statusCode: 404, message: `<%= messages.error_404 %>` })
2016-12-24 11:34:41 +00:00
return next()
2016-11-07 01:34:58 +00:00
}
2017-07-27 14:26:36 +00:00
2017-07-09 21:41:04 +00:00
// Call asyncData & fetch hooks on components matched by the route.
2017-05-09 12:43:47 +00:00
await Promise.all(Components.map((Component, i) => {
2016-12-24 11:34:41 +00:00
// Check if only children route changed
2018-01-24 06:33:27 +00:00
Component._path = compile(to.matched[matches[i]].path)(to.params)
2017-11-06 17:30:37 +00:00
Component._dataRefresh = false
// Check if Component need to be refreshed (call asyncData & fetch)
// Only if its slug has changed or is watch query changes
2018-10-24 13:46:06 +00:00
if ((this._pathChanged && this._queryChanged) || Component._path !== _lastPaths[i]) {
2017-11-06 17:30:37 +00:00
Component._dataRefresh = true
} else if (!this._pathChanged && this._queryChanged) {
const watchQuery = Component.options.watchQuery
if (watchQuery === true) {
Component._dataRefresh = true
} else if (Array.isArray(watchQuery)) {
2018-10-24 13:46:06 +00:00
Component._dataRefresh = watchQuery.some(key => this._diffQuery[key])
2017-11-06 17:30:37 +00:00
}
}
if (!this._hadError && this._isMounted && !Component._dataRefresh) {
2016-12-24 11:34:41 +00:00
return Promise.resolve()
}
2017-07-09 21:41:04 +00:00
2018-10-24 13:46:06 +00:00
const promises = []
2017-07-09 21:41:04 +00:00
const hasAsyncData = (
Component.options.asyncData &&
typeof Component.options.asyncData === 'function'
)
2017-07-09 21:41:04 +00:00
const hasFetch = !!Component.options.fetch
<% if (loading) { %>
const loadingIncrease = (hasAsyncData && hasFetch) ? 30 : 45
<% } %>
2017-07-09 21:41:04 +00:00
// Call asyncData(context)
if (hasAsyncData) {
2017-10-16 08:40:08 +00:00
const promise = promisify(Component.options.asyncData, app.context)
.then((asyncDataResult) => {
applyAsyncData(Component, asyncDataResult)
<% if (loading) { %>
2018-10-24 13:46:06 +00:00
if (this.$loading.increase) {
this.$loading.increase(loadingIncrease)
}
<% } %>
})
2016-12-24 11:34:41 +00:00
promises.push(promise)
}
2017-07-09 21:41:04 +00:00
// Check disabled page loading
this.$loading.manual = Component.options.loading === false
2017-07-09 21:41:04 +00:00
// Call fetch(context)
if (hasFetch) {
2018-10-24 13:46:06 +00:00
let p = Component.options.fetch(app.context)
if (!p || (!(p instanceof Promise) && (typeof p.then !== 'function'))) {
p = Promise.resolve(p)
}
p.then((fetchResult) => {
<% if (loading) { %>
if (this.$loading.increase) {
this.$loading.increase(loadingIncrease)
}
2018-10-24 13:46:06 +00:00
<% } %>
})
promises.push(p)
2016-12-24 11:34:41 +00:00
}
2017-07-09 21:41:04 +00:00
2016-12-24 11:34:41 +00:00
return Promise.all(promises)
}))
2017-07-27 14:26:36 +00:00
2016-11-10 23:01:36 +00:00
// If not redirected
2018-01-12 15:10:30 +00:00
if (!nextCalled) {
<% if (loading) { %>
2018-08-06 09:32:39 +00:00
if (this.$loading.finish && !this.$loading.manual) {
this.$loading.finish()
}
<% } %>
2018-01-12 15:10:30 +00:00
next()
}
2017-07-09 21:41:04 +00:00
2018-10-24 13:46:06 +00:00
} catch (err) {
const error = err || {}
if (error.message === 'ERR_REDIRECT') {
return this.<%= globals.nuxt %>.$emit('routeChanged', to, from, error)
}
_lastPaths = []
2017-07-09 21:41:04 +00:00
globalHandleError(error)
2017-07-09 21:41:04 +00:00
// Load error layout
2017-03-17 17:02:58 +00:00
let layout = NuxtError.layout
if (typeof layout === 'function') {
2017-10-16 08:40:08 +00:00
layout = layout(app.context)
2017-03-17 17:02:58 +00:00
}
2017-07-09 21:41:04 +00:00
await this.loadLayout(layout)
2017-07-27 14:26:36 +00:00
2017-07-09 21:41:04 +00:00
this.error(error)
this.<%= globals.nuxt %>.$emit('routeChanged', to, from, error)
next()
2017-05-09 12:43:47 +00:00
}
2016-11-07 01:34:58 +00:00
}
2017-01-20 17:32:43 +00:00
// Fix components format in matched, it's due to code-splitting of vue-router
2018-10-24 13:46:06 +00:00
function normalizeComponents(to, ___) {
2017-01-20 17:32:43 +00:00
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 showNextPage(to) {
// Hide error component if no error
if (this._hadError && this._dateLastError === this.$options.nuxt.dateErr) {
this.error()
}
// Set layout
let layout = this.$options.nuxt.err
? NuxtError.layout
: to.matched[0].components.default.options.layout
if (typeof layout === 'function') {
layout = layout(app.context)
}
this.setLayout(layout)
}
2016-11-22 23:27:07 +00:00
// When navigating on a different route but the same component is used, Vue.js
2017-07-09 21:41:04 +00:00
// Will not update the instance data, so we have to update $data ourselves
2017-11-06 17:30:37 +00:00
function fixPrepatch(to, ___) {
if (this._pathChanged === false && this._queryChanged === false) return
2017-07-09 21:41:04 +00:00
2016-11-22 23:27:07 +00:00
Vue.nextTick(() => {
2018-01-24 06:33:27 +00:00
const matches = []
const instances = getMatchedComponentsInstances(to, matches)
2018-05-04 09:36:10 +00:00
const Components = getMatchedComponents(to, matches)
2017-07-09 21:41:04 +00:00
2017-11-06 17:30:37 +00:00
instances.forEach((instance, i) => {
if (!instance) return
// if (
// !this._queryChanged &&
// to.matched[matches[i]].path.indexOf(':') === -1 &&
// to.matched[matches[i]].path.indexOf('*') === -1
// ) return // If not a dynamic route, skip
if (
instance.constructor._dataRefresh &&
Components[i] === instance.constructor &&
typeof instance.constructor.options.data === 'function'
) {
2017-07-09 21:41:04 +00:00
const newData = instance.constructor.options.data.call(instance)
2018-10-24 13:46:06 +00:00
for (const key in newData) {
2016-11-22 23:27:07 +00:00
Vue.set(instance.$data, key, newData[key])
}
}
})
showNextPage.call(this, to)
2017-07-09 23:57:50 +00:00
<% if (isDev) { %>
2017-07-09 21:41:04 +00:00
// Hot reloading
2017-03-24 15:52:18 +00:00
setTimeout(() => hotReloadAPI(this), 100)
2017-07-09 23:57:50 +00:00
<% } %>
2016-11-22 23:27:07 +00:00
})
}
2018-10-24 13:46:06 +00:00
function nuxtReady(_app) {
window.<%= globals.readyCallback %>Cbs.forEach((cb) => {
2017-07-09 21:41:04 +00:00
if (typeof cb === 'function') {
cb(_app)
2017-07-09 21:41:04 +00:00
}
})
// Special JSDOM
if (typeof window.<%= globals.loadedCallback %> === 'function') {
window.<%= globals.loadedCallback %>(_app)
2017-07-09 21:41:04 +00:00
}
// Add router hooks
2018-08-15 13:23:03 +00:00
router.afterEach((to, from) => {
// Wait for fixPrepatch + $data updates
Vue.nextTick(() => _app.<%= globals.nuxt %>.$emit('routeChanged', to, from))
2017-07-09 21:41:04 +00:00
})
}
<% if (isDev) { %>
2019-01-06 07:56:59 +00:00
const noopData = () => { return {} }
const noopFetch = () => {}
2017-03-16 17:52:06 +00:00
// Special hot reload with asyncData(context)
2017-10-28 12:09:33 +00:00
function getNuxtChildComponents($parent, $components = []) {
$parent.$children.forEach(($child) => {
if ($child.$vnode && $child.$vnode.data.nuxtChild && !$components.find(c =>(c.$options.__file === $child.$options.__file))) {
2017-10-28 12:09:33 +00:00
$components.push($child)
}
if ($child.$children && $child.$children.length) {
getNuxtChildComponents($child, $components)
}
})
return $components
}
2018-10-24 13:46:06 +00:00
function hotReloadAPI(_app) {
2016-12-24 13:15:00 +00:00
if (!module.hot) return
2017-07-27 14:26:36 +00:00
let $components = getNuxtChildComponents(_app.<%= globals.nuxt %>, [])
2017-07-27 14:26:36 +00:00
2017-03-16 17:52:06 +00:00
$components.forEach(addHotReload.bind(_app))
}
2018-10-24 13:46:06 +00:00
function addHotReload($component, depth) {
2017-03-16 17:52:06 +00:00
if ($component.$vnode.data._hasHotReload) return
$component.$vnode.data._hasHotReload = true
2017-07-09 21:41:04 +00:00
2017-03-16 17:52:06 +00:00
var _forceUpdate = $component.$forceUpdate.bind($component.$parent)
2017-07-09 21:41:04 +00:00
$component.$vnode.context.$forceUpdate = async () => {
2017-03-17 17:02:58 +00:00
let Components = getMatchedComponents(router.currentRoute)
let Component = Components[depth]
2016-11-07 01:34:58 +00:00
if (!Component) return _forceUpdate()
if (typeof Component === 'object' && !Component.options) {
// Updated via vue-router resolveAsyncComponents()
Component = Vue.extend(Component)
Component._Ctor = Component
}
2017-03-16 17:52:06 +00:00
this.error()
2016-11-07 01:34:58 +00:00
let promises = []
2016-11-10 23:01:36 +00:00
const next = function (path) {
<%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %>
router.push(path)
}
await setContext(app, {
2017-10-16 08:40:08 +00:00
route: router.currentRoute,
isHMR: true,
next: next.bind(this)
})
2017-10-28 12:09:33 +00:00
const context = app.context
<% if (loading) { %>
if (this.$loading.start && !this.$loading.manual) this.$loading.start()
<% } %>
2017-10-28 12:09:33 +00:00
callMiddleware.call(this, Components, context)
2017-03-17 17:02:58 +00:00
.then(() => {
// If layout changed
if (depth !== 0) return Promise.resolve()
let layout = Component.options.layout || 'default'
if (typeof layout === 'function') {
layout = layout(context)
}
if (this.layoutName === layout) return Promise.resolve()
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(() => {
2017-04-14 14:31:14 +00:00
// Call asyncData(context)
2017-03-17 17:02:58 +00:00
let pAsyncData = promisify(Component.options.asyncData || noopData, context)
pAsyncData.then((asyncDataResult) => {
2017-04-14 14:31:14 +00:00
applyAsyncData(Component, asyncDataResult)
2017-03-17 17:02:58 +00:00
<%= (loading ? 'this.$loading.increase && this.$loading.increase(30)' : '') %>
})
promises.push(pAsyncData)
// Call fetch()
Component.options.fetch = Component.options.fetch || noopFetch
let pFetch = Component.options.fetch(context)
if (!pFetch || (!(pFetch instanceof Promise) && (typeof pFetch.then !== 'function'))) { pFetch = Promise.resolve(pFetch) }
2017-03-17 17:02:58 +00:00
<%= (loading ? 'pFetch.then(() => this.$loading.increase && this.$loading.increase(30))' : '') %>
promises.push(pFetch)
return Promise.all(promises)
})
.then(() => {
2016-11-10 23:01:36 +00:00
<%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %>
2016-11-07 01:34:58 +00:00
_forceUpdate()
2017-03-16 17:52:06 +00:00
setTimeout(() => hotReloadAPI(this), 100)
2016-11-07 01:34:58 +00:00
})
}
}
2017-07-09 21:41:04 +00:00
<% } %>
2016-11-07 01:34:58 +00:00
2017-07-09 21:41:04 +00:00
async function mountApp(__app) {
// Set global variables
app = __app.app
router = __app.router
2018-10-24 13:46:06 +00:00
<% if (store) { %>store = __app.store<% } %>
2017-07-09 21:41:04 +00:00
// Resolve route components
const Components = await Promise.all(resolveComponents(router))
2017-07-09 21:41:04 +00:00
// Create Vue instance
2016-11-07 01:34:58 +00:00
const _app = new Vue(app)
2017-07-09 21:41:04 +00:00
<% if (mode !== 'spa') { %>
2018-10-24 13:46:06 +00:00
// Load layout
const layout = NUXT.layout || 'default'
await _app.loadLayout(layout)
_app.setLayout(layout)
<% } %>
2017-07-09 21:41:04 +00:00
// Mounts Vue app to DOM element
const mount = () => {
_app.$mount('#<%= globals.id %>')
2017-07-09 21:41:04 +00:00
// Listen for first Vue update
2017-03-02 16:31:37 +00:00
Vue.nextTick(() => {
// Call window.{{globals.readyCallback}} callbacks
2017-03-02 16:31:37 +00:00
nuxtReady(_app)
2017-07-09 21:41:04 +00:00
<% if (isDev) { %>
// Enable hot reloading
hotReloadAPI(_app)
<% } %>
2017-03-02 16:31:37 +00:00
})
}
2017-07-09 21:41:04 +00:00
// Enable transitions
2017-10-16 08:40:08 +00:00
_app.setTransitions = _app.$options.nuxt.setTransitions.bind(_app)
if (Components.length) {
_app.setTransitions(mapTransitions(Components, router.currentRoute))
2017-07-09 21:41:04 +00:00
_lastPaths = router.currentRoute.matched.map(route => compile(route.path)(router.currentRoute.params))
}
2017-07-27 14:26:36 +00:00
2017-07-09 21:41:04 +00:00
// Initialize error handler
_app.$loading = {} // To avoid error while _app.$nuxt does not exist
2016-11-07 01:34:58 +00:00
if (NUXT.error) _app.error(NUXT.error)
2017-07-09 21:41:04 +00:00
2016-11-07 01:34:58 +00:00
// Add router hooks
router.beforeEach(loadAsyncComponents.bind(_app))
router.beforeEach(render.bind(_app))
2017-01-20 17:32:43 +00:00
router.afterEach(normalizeComponents)
2016-11-22 23:27:07 +00:00
router.afterEach(fixPrepatch.bind(_app))
2017-07-27 14:26:36 +00:00
2017-07-09 21:41:04 +00:00
// If page already is server rendered
if (NUXT.serverRendered) {
mount()
return
2016-11-07 01:34:58 +00:00
}
2017-07-09 21:41:04 +00:00
2017-09-22 14:05:59 +00:00
// First render on client-side
render.call(_app, router.currentRoute, router.currentRoute, (path) => {
// If not redirected
2017-07-09 21:41:04 +00:00
if (!path) {
normalizeComponents(router.currentRoute, router.currentRoute)
showNextPage.call(_app, router.currentRoute)
// Don't call fixPrepatch.call(_app, router.currentRoute, router.currentRoute) since it's first render
mount()
return
}
2017-07-09 21:41:04 +00:00
// Push the path and then mount app
2018-01-11 08:59:55 +00:00
router.push(path, () => mount(), (err) => {
2018-01-11 11:56:37 +00:00
if (!err) return mount()
errorHandler(err)
2018-01-11 08:59:55 +00:00
})
})
2017-07-27 14:26:36 +00:00
}