From 3b635323a448f7e01e38f6b2f71f89de9b246a49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Sat, 25 Mar 2017 18:59:46 +0100 Subject: [PATCH] Add layout in __NUXT__ --- lib/app/client.js | 14 +++----------- lib/app/server.js | 15 +++++++++++++-- lib/build.js | 4 ++-- test/fixtures/with-config/layouts/error.vue | 6 ++++++ test/fixtures/with-config/pages/error.vue | 11 +++++++++++ test/fixtures/with-config/plugins/only-client.js | 2 +- test/with-config.test.js | 12 +++++++++++- 7 files changed, 47 insertions(+), 17 deletions(-) create mode 100644 test/fixtures/with-config/pages/error.vue diff --git a/lib/app/client.js b/lib/app/client.js index 41101736a9..db3edeeb11 100644 --- a/lib/app/client.js +++ b/lib/app/client.js @@ -386,18 +386,10 @@ Promise.all(resolveComponents) .then((Components) => { const _app = new Vue(app) - let context = getContext({ to: router.currentRoute, isClient: true<%= (store ? ', store' : '') %> }) - let layoutName = 'default' - return callMiddleware.call(_app, Components, context) + let layout = NUXT.layout || 'default' + return _app.loadLayout(layout) .then(() => { - layoutName = Components.length ? Components[0].options.layout : NuxtError.layout - if (typeof layoutName === 'function') { - layoutName = layoutName(context) - } - return _app.loadLayout(layoutName) - }) - .then(() => { - _app.setLayout(layoutName) + _app.setLayout(layout) return { _app, Components } }) }) diff --git a/lib/app/server.js b/lib/app/server.js index 600320f523..fa5cff0c75 100644 --- a/lib/app/server.js +++ b/lib/app/server.js @@ -22,7 +22,7 @@ export default context => { // Add store to the context <%= (store ? 'context.store = store' : '') %> // Nuxt object - context.nuxt = { data: [], error: null<%= (store ? ', state: null' : '') %>, serverRendered: true } + context.nuxt = { layout: 'default', data: [], error: null<%= (store ? ', state: null' : '') %>, serverRendered: true } // create context.next for simulate next() of beforeEach() when wanted to redirect context.redirected = false context.next = function (opts) { @@ -120,6 +120,8 @@ export default context => { return _app.loadLayout(layout).then(() => _app.setLayout(layout)) }) .then((layout) => { + // Set layout to __NUXT__ + context.nuxt.layout = _app.layoutName // Call middleware (layout + pages) let midd = [] if (layout.middleware) { @@ -202,7 +204,16 @@ export default context => { context.nuxt.error = _app.$options._nuxt.err <%= (store ? '// Add the state from the vuex store' : '') %> <%= (store ? 'context.nuxt.state = store.state' : '') %> - return _app + // If no error, return main app + if (!context.nuxt.error) { + return _app + } + // Load layout for error page + let layout = (typeof NuxtError.layout === 'function' ? NuxtError.layout(ctx) : NuxtError.layout) + context.nuxt.layout = layout || '' + return _app.loadLayout(layout) + .then(() => _app.setLayout(layout)) + .then(() => _app) }) .catch(function (error) { if (!componentsLoaded && error instanceof Error) { diff --git a/lib/build.js b/lib/build.js index ca772683b3..43e664aeb4 100644 --- a/lib/build.js +++ b/lib/build.js @@ -371,8 +371,8 @@ function getWebpackServerConfig () { function createWebpackMiddleware () { const clientConfig = getWebpackClientConfig.call(this) - const host = process.env.HOST || process.env.npm_package_config_nuxt_port || '127.0.0.1' - const port = process.env.PORT || process.env.npm_package_config_nuxt_host || '3000' + const host = process.env.HOST || process.env.npm_package_config_nuxt_host || '127.0.0.1' + const port = process.env.PORT || process.env.npm_package_config_nuxt_port || '3000' // setup on the fly compilation + hot-reload clientConfig.entry.app = _.flatten(['webpack-hot-middleware/client?reload=true', clientConfig.entry.app]) clientConfig.plugins.push( diff --git a/test/fixtures/with-config/layouts/error.vue b/test/fixtures/with-config/layouts/error.vue index 7694d81b29..f50245f857 100644 --- a/test/fixtures/with-config/layouts/error.vue +++ b/test/fixtures/with-config/layouts/error.vue @@ -1,3 +1,9 @@ + + diff --git a/test/fixtures/with-config/pages/error.vue b/test/fixtures/with-config/pages/error.vue new file mode 100644 index 0000000000..f309c03407 --- /dev/null +++ b/test/fixtures/with-config/pages/error.vue @@ -0,0 +1,11 @@ + + + diff --git a/test/fixtures/with-config/plugins/only-client.js b/test/fixtures/with-config/plugins/only-client.js index 12ee6becab..ca1ce034f3 100644 --- a/test/fixtures/with-config/plugins/only-client.js +++ b/test/fixtures/with-config/plugins/only-client.js @@ -1 +1 @@ -console.log('Only called in client-side!') +// Custom plugin (only included on client-side) diff --git a/test/with-config.test.js b/test/with-config.test.js index 13b50b7452..83faa9636d 100644 --- a/test/with-config.test.js +++ b/test/with-config.test.js @@ -37,6 +37,7 @@ test('/ (custom build.publicPath)', async t => { test('/test/ (router base)', async t => { const window = await nuxt.renderAndGetWindow(url('/test/')) const html = window.document.body.innerHTML + t.is(window.__NUXT__.layout, 'default') t.true(html.includes('

Default layout

')) t.true(html.includes('

I have custom configurations

')) }) @@ -44,6 +45,7 @@ test('/test/ (router base)', async t => { test('/test/about (custom layout)', async t => { const window = await nuxt.renderAndGetWindow(url('/test/about')) const html = window.document.body.innerHTML + t.is(window.__NUXT__.layout, 'custom') t.true(html.includes('

Custom layout

')) t.true(html.includes('

About page

')) }) @@ -57,6 +59,14 @@ test('/test/env', async t => { t.true(html.includes('"string": "Nuxt.js"')) }) +test('/test/error', async t => { + const window = await nuxt.renderAndGetWindow(url('/test/error')) + const html = window.document.body.innerHTML + t.is(window.__NUXT__.layout, 'custom') + t.true(html.includes('

Custom layout

')) + t.true(html.includes('Error page')) +}) + test('/test/user-agent', async t => { const window = await nuxt.renderAndGetWindow(url('/test/user-agent')) const html = window.document.body.innerHTML @@ -72,7 +82,7 @@ test('/test/about-bis (added with extendRoutes)', async t => { test('Check stats.json generated by build.analyze', t => { const stats = require(resolve(__dirname, 'fixtures/with-config/.nuxt/dist/stats.json')) - t.is(stats.assets.length, 19) + t.is(stats.assets.length, 21) }) // Close server and ask nuxt to stop listening to file changes