Vue 2.2 and styles included

lib/app/App.vue

@@ -12,7 +12,7 @@ let layouts = {
 <%
 var layoutsKeys = Object.keys(layouts);
 layoutsKeys.forEach(function (key, i) { %>
-  "_<%= key %>": process.browser ? () => System.import('<%= layouts[key] %>') : require('<%= layouts[key] %>')<%= (i + 1) < layoutsKeys.length ? ',' : '' %>
+  "_<%= key %>": () => import('<%= layouts[key] %>')<%= (i + 1) < layoutsKeys.length ? ',' : '' %>
 <% }) %>
 }
 

lib/app/router.js

@@ -23,7 +23,7 @@ function recursiveRoutes(routes, tab, components) {
 var _components = []
 var _routes = recursiveRoutes(router.routes, '\t\t', _components)
 uniqBy(_components, '_name').forEach((route) => { %>
-const <%= route._name %> = process.browser ? () => System.import('<%= route.component %>') : require('<%= route.component %>')
+const <%= route._name %> = () => import('<%= route.component %>')
 <% }) %>
 
 <% if (router.scrollBehavior) { %>

lib/app/server.js

@@ -8,7 +8,7 @@ import { stringify } from 'querystring'
 import { omit } from 'lodash'
 import middleware from './middleware'
 import { app, router<%= (store ? ', store' : '') %>, NuxtError } from './index'
-import { getMatchedComponents, getContext, promiseSeries, promisify, urlJoin } from './utils'
+import { getContext, promiseSeries, promisify, urlJoin } from './utils'
 
 const isDev = <%= isDev %>
 const _app = new Vue(app)
@@ -51,14 +51,22 @@ export default context => {
 
   <%= (isDev ? 'const s = isDev && Date.now()' : '') %>
   let ctx = getContext(context)
-  let Components = getMatchedComponents(context.route)
-  <% if (store) { %>
-    let promise = (store._actions && store._actions.nuxtServerInit ? store.dispatch('nuxtServerInit', omit(getContext(context), 'redirect', 'error')) : null)
-    if (!(promise instanceof Promise)) promise = Promise.resolve()
-  <% } else { %>
-    let promise = Promise.resolve()
-  <% } %>
-  return promise
+  let Components = []
+  return new Promise((resolve) => {
+    // Wait for the lazy-routes are loaded
+    router.onReady(resolve)
+  })
+  .then(() => {
+    Components = router.getMatchedComponents()
+    // nuxtServerInit
+    <% if (store) { %>
+      let promise = (store._actions && store._actions.nuxtServerInit ? store.dispatch('nuxtServerInit', omit(getContext(context), 'redirect', 'error')) : null)
+      if (!(promise instanceof Promise)) promise = Promise.resolve()
+    <% } else { %>
+      let promise = Promise.resolve()
+    <% } %>
+    return promise
+  })
   .then(() => {
     // Sanitize Components
     Components = Components.map((Component) => {
@@ -89,7 +97,7 @@ export default context => {
     if (typeof layout === 'function') {
       layout = layout(ctx)
     }
-    return _app.setLayout(layout)
+    return _app.loadLayout(layout).then(() => _app.setLayout(layout))
   })
   .then((layout) => {
     // Call middleware (layout + pages)

lib/build.js

@@ -99,10 +99,10 @@ export function options () {
       colors: true
     }
     const serverConfig = getWebpackServerConfig.call(this)
-    const bundlePath = join(serverConfig.output.path, serverConfig.output.filename)
+    const bundlePath = join(serverConfig.output.path, 'server-bundle.json')
     if (fs.existsSync(bundlePath)) {
       const bundle = fs.readFileSync(bundlePath, 'utf8')
-      createRenderer.call(this, bundle)
+      createRenderer.call(this, JSON.parse(bundle))
       addAppTemplate.call(this)
     }
   }
@@ -413,11 +413,11 @@ function webpackWatchAndUpdate () {
   const mfs = new MFS()
   const serverConfig = getWebpackServerConfig.call(this)
   const serverCompiler = webpack(serverConfig)
-  const outputPath = join(serverConfig.output.path, serverConfig.output.filename)
+  const outputPath = join(serverConfig.output.path, 'server-bundle.json')
   serverCompiler.outputFileSystem = mfs
   this.webpackServerWatcher = serverCompiler.watch({}, (err) => {
     if (err) throw err
-    createRenderer.call(this, mfs.readFileSync(outputPath, 'utf-8'))
+    createRenderer.call(this, JSON.parse(mfs.readFileSync(outputPath, 'utf-8')))
   })
 }
 
@@ -442,10 +442,10 @@ function webpackRunServer () {
       if (err) return reject(err)
       console.log('[nuxt:build:server]\n', stats.toString(webpackStats)) // eslint-disable-line no-console
       if (stats.hasErrors()) return reject(new Error('Webpack build exited with errors'))
-      const bundlePath = join(serverConfig.output.path, serverConfig.output.filename)
+      const bundlePath = join(serverConfig.output.path, 'server-bundle.json')
       readFile(bundlePath, 'utf8')
       .then((bundle) => {
-        createRenderer.call(this, bundle)
+        createRenderer.call(this, JSON.parse(bundle))
         resolve()
       })
     })

lib/nuxt.js

@@ -42,7 +42,7 @@ class Nuxt {
       },
       performance: {
         gzip: true,
-        prefetch: true
+        prefetch: false
       },
       build: {}
     }

lib/render.js

@@ -100,6 +100,7 @@ export function renderRoute (url, context = {}) {
     if (self.options.router.base !== '/') {
       HEAD += `<base href="${self.options.router.base}">`
     }
+    HEAD += context.styles
     APP += `<script type="text/javascript" defer>window.__NUXT__=${serialize(context.nuxt, { isJSON: true })}</script>`
     const html = self.appTemplate({
       HTML_ATTRS: 'n-head-ssr ' + m.htmlAttrs.text(),

lib/webpack/base.config.js

@@ -16,7 +16,7 @@ import { isUrl, urlJoin } from '../utils'
 export default function ({ isClient, isServer }) {
   const nodeModulesDir = join(__dirname, '..', 'node_modules')
   let config = {
-    devtool: 'source-map',
+    devtool: (this.dev ? 'cheap-module-eval-source-map' : false),
     entry: {
       vendor: ['vue', 'vue-router', 'vue-meta']
     },
@@ -24,6 +24,7 @@ export default function ({ isClient, isServer }) {
       publicPath: (isUrl(this.options.build.publicPath) ? this.options.build.publicPath : urlJoin(this.options.router.base, this.options.build.publicPath))
     },
     performance: {
+      maxEntrypointSize: 300000,
       hints: (this.dev ? false : 'warning')
     },
     resolve: {

lib/webpack/client.config.js

@@ -5,7 +5,6 @@ import webpack from 'webpack'
 import HTMLPlugin from 'html-webpack-plugin'
 import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin'
 import PreloadWebpackPlugin from 'preload-webpack-plugin'
-import ExtractTextPlugin from 'extract-text-webpack-plugin'
 import ProgressBarPlugin from 'progress-bar-webpack-plugin'
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
 import base from './base.config.js'
@@ -82,15 +81,6 @@ export default function () {
   // Production client build
   if (!this.dev) {
     config.plugins.push(
-      // Use ExtractTextPlugin to extract CSS into a single file
-      new ExtractTextPlugin({
-        filename: this.options.build.filenames.css,
-        allChunks: true
-      }),
-      // This is needed in webpack 2 for minifying CSS
-      new webpack.LoaderOptionsPlugin({
-        minimize: true
-      }),
       // Minify JS
       new webpack.optimize.UglifyJsPlugin({
         compress: {

lib/webpack/server.config.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import webpack from 'webpack'
+import VueSSRPlugin from 'vue-ssr-webpack-plugin'
 import base from './base.config.js'
 import { each, uniq } from 'lodash'
 import { existsSync, readFileSync } from 'fs'
@@ -22,7 +23,7 @@ export default function () {
 
   config = Object.assign(config, {
     target: 'node',
-    devtool: false,
+    devtool: 'source-map',
     entry: resolve(this.dir, '.nuxt', 'server.js'),
     output: Object.assign({}, config.output, {
       path: resolve(this.dir, '.nuxt', 'dist'),
@@ -30,6 +31,9 @@ export default function () {
       libraryTarget: 'commonjs2'
     }),
     plugins: (config.plugins || []).concat([
+      new VueSSRPlugin({
+        filename: 'server-bundle.json'
+      }),
       new webpack.DefinePlugin(Object.assign(env, {
         'process.env.NODE_ENV': JSON.stringify(this.dev ? 'development' : 'production'),
         'process.BROWSER_BUILD': false, // deprecated

lib/webpack/vue-loader.config.js

@@ -19,17 +19,6 @@ export default function ({ isClient }) {
     },
     preserveWhitespace: false
   }
-
-  if (!this.dev && isClient) {
-    // Use ExtractTextPlugin to extract CSS into a single file
-    const ExtractTextPlugin = require('extract-text-webpack-plugin')
-    config.loaders.css = ExtractTextPlugin.extract({ loader: 'css-loader' })
-    config.loaders.scss = ExtractTextPlugin.extract({ loader: 'css-loader!sass-loader', fallbackLoader: 'vue-style-loader' })
-    config.loaders.sass = ExtractTextPlugin.extract({ loader: 'css-loader!sass-loader?indentedSyntax', fallbackLoader: 'vue-style-loader' })
-    config.loaders.stylus = ExtractTextPlugin.extract({ loader: 'css-loader!stylus-loader', fallbackLoader: 'vue-style-loader' })
-    config.loaders.less = ExtractTextPlugin.extract({ loader: 'css-loader!less-loader', fallbackLoader: 'vue-style-loader' })
-  }
-
   // Return the config
   return config
 }

package.json

@@ -62,7 +62,6 @@
     "compression": "^1.6.2",
     "css-loader": "^0.27.3",
     "debug": "^2.6.3",
-    "extract-text-webpack-plugin": "2.1.0",
     "file-loader": "^0.10.1",
     "fs-extra": "^2.1.2",
     "glob": "^7.1.1",
@@ -86,6 +85,7 @@
     "vue-router": "^2.3.0",
     "vue-server-renderer": "^2.2.4",
     "vue-ssr-html-stream": "^2.2.0",
+    "vue-ssr-webpack-plugin": "^1.0.2",
     "vue-template-compiler": "^2.2.4",
     "vuex": "^2.2.1",
     "webpack": "^2.2.1",