Move vendor and filenames in build key and add loaders

README.md

@@ -65,9 +65,11 @@ const options = {
   routes: [], // see examples/custom-routes
   css: ['/dist/boostrap.css'] // see examples/global-css
   store: true // see examples/vuex-store
-  vendor: ['axios'], // see examples/plugins-vendor
   plugins: ['public/plugin.js'], // see examples/plugins-vendor
   loading: false or { color: 'blue', failedColor: 'red' } or 'components/my-loader' // see examples/custom-loading
+  build: {
+    vendor: ['axios'] // see examples/plugins-vendor
+  }
 }
 
 // Launch nuxt build with given options

examples/async-data/nuxt.config.js

@@ -1,5 +1,7 @@
 module.exports = {
-  vendor: ['axios'], // Add axios in the vendor.bundle.js
+  build: {
+    vendor: ['axios'] // Add axios in the vendor.bundle.js
+  },
   loading: {
     color: '#4FC08D',
     failedColor: '#bf5050',

examples/custom-build/nuxt.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  build: {
+    filenames: {
+      css: 'app.css', // default: style.css
+      vendor: 'vendor.js', // default: vendor.bundle.js
+      app: 'app.js' // default: nuxt.bundle.js
+    },
+    vendor: ['lodash'],
+    // Loaders config (Webpack 2)
+    loaders: [
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'url',
+        options: {
+          limit: 100000, // 100KO
+          name: 'img/[name].[ext]?[hash]'
+        }
+      }
+    ]
+  }
+}

examples/custom-build/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "custom-build",
+  "description": "",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "start": "nuxt"
+  }
+}

examples/custom-build/pages/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="container">
+    <p><img src="../assets/nuxt.png" /></p>
+    <p>This image is included as data:image/png;base64...</p>
+    <p>In the source code, the files generated are based on the build.filenames data.</p>
+    <p>If you look at the <a href="/_nuxt/vendor.js">vendor.js</a>, lodash has been included (cmd/ctrl + F "lodash").</p>
+  </div>
+</template>
+
+<style>
+.container {
+  font-size: 20px;
+  text-align: center;
+  padding: 100px;
+}
+</style>

examples/head-elements/pages/index.vue

@@ -1,4 +1,9 @@
 <template>
+  <nuxt-head>
+    <title>I am the title of the page</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </nuxt-head>
+
   <h1>This page has a title 🤔</h1>
 </template>
 

examples/plugins-vendor/README.md

@@ -1,18 +1,20 @@
 # Using external modules and plugings with Nuxt.js
 
-## Configuration: `vendor`
+## Configuration: `build.vendor`
 
 > Nuxt.js allows you to add modules inside the `vendor.bundle.js` file generated to reduce the size of the app bundle. It's really useful when using external modules (like `axios` for example)
 
-To add a module/file inside the vendor bundle, add the `vendor` key inside `nuxt.config.js`:
+To add a module/file inside the vendor bundle, add the `build.vendor` key inside `nuxt.config.js`:
 ```js
 const { join } = require('path')
 
 module.exports = {
+  build: {
     vendor: [
       'axios', // node module
       join(__dirname, './js/my-library.js') // custom file
     ]
+  }
 }
 ```
 
@@ -35,7 +37,9 @@ Then, I add my file inside the `plugins` key of `nuxt.config.js`:
 const { join } = require('path')
 
 module.exports = {
-  vendor: ['vue-notifications'],
+  build: {
+    vendor: ['vue-notifications']
+  },
   plugins: [ join(__dirname, './plugins/vue-notifications') ]
 }
 ```

examples/plugins-vendor/nuxt.config.js

@@ -1,6 +1,8 @@
 const { join } = require('path')
 
 module.exports = {
-  vendor: ['axios', 'mini-toastr', 'vue-notifications'],
+  build: {
+    vendor: ['axios', 'mini-toastr', 'vue-notifications']
+  },
   plugins: [ join(__dirname, './plugins/vue-notifications.js') ]
 }

lib/build/index.js

@@ -13,7 +13,44 @@ const { createBundleRenderer } = require('vue-server-renderer')
 const { join, resolve } = require('path')
 const r = resolve
 
+const defaults = {
+  filenames: {
+    css: 'style.css',
+    vendor: 'vendor.bundle.js',
+    app: 'nuxt.bundle.js'
+  },
+  vendor: [],
+  loaders: []
+}
+const defaultsLoaders = [
+  {
+    test: /\.(png|jpg|gif|svg)$/,
+    loader: 'url',
+    options: {
+      limit: 1000, // 1KO
+      name: 'img/[name].[ext]?[hash]'
+    }
+  },
+  {
+    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+    loader: 'url',
+    query: {
+      limit: 1000, // 1 KO
+      name: 'fonts/[name].[hash:7].[ext]'
+    }
+  }
+]
+
 module.exports = function * () {
+  if (this.options.build === false) {
+    return Promise.resolve()
+  }
+  // Defaults build options
+  if (this.options.build && Array.isArray(this.options.build.loaders)) {
+    this.options.build = _.defaultsDeep(this.options.build, defaults)
+  } else {
+    this.options.build = _.defaultsDeep(this.options.build, defaults, { loaders: defaultsLoaders })
+  }
   /*
   ** Check if pages dir exists and warn if not
   */
@@ -125,7 +162,6 @@ module.exports = function * () {
       webpackRunServer.call(this)
     ]
   }
-  return this
 }
 
 function addGlobalWebpackConfig (config) {
@@ -142,37 +178,40 @@ function addGlobalWebpackConfig (config) {
       join(this.dir, 'node_modules')
     ]
   }
+  config.module.rules = config.module.rules.concat(this.options.build.loaders)
   return config
 }
 
 function getWebpackClientConfig () {
   var config = require(r(__dirname, 'webpack', 'client.config.js'))
+  config = _.cloneDeep(config)
   // Entry
   config.entry.app = r(this.dir, '.nuxt', 'client.js')
   // Add vendors
   if (this.options.store) config.entry.vendor.push('vuex')
-  config.entry.vendor = config.entry.vendor.concat(this.options.vendor)
+  config.entry.vendor = config.entry.vendor.concat(this.options.build.vendor)
   // extract vendor chunks for better caching
   config.plugins.push(
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
-      filename: this.options.filenames.vendor
+      filename: this.options.build.filenames.vendor
     })
   )
   // Output
   config.output.path = r(this.dir, '.nuxt', 'dist')
-  config.output.filename = this.options.filenames.app
+  config.output.filename = this.options.build.filenames.app
   // Extract text plugin
   if (this.isProd) {
     const ExtractTextPlugin = require('extract-text-webpack-plugin')
     let plugin = config.plugins.find((plugin) => plugin instanceof ExtractTextPlugin)
-    if (plugin) plugin.filename = this.options.filenames.css
+    if (plugin) plugin.filename = this.options.build.filenames.css
   }
   return addGlobalWebpackConfig.call(this, config)
 }
 
 function getWebpackServerConfig () {
   var config = require(r(__dirname, 'webpack', 'server.config.js'))
+  config = _.cloneDeep(config)
   // Entry
   config.entry = r(this.dir, '.nuxt', 'server.js')
   // Output

lib/build/webpack/base.config.js

@@ -30,22 +30,6 @@ module.exports = {
         options: {
           presets: ['es2015', 'stage-2']
         }
-      },
-      {
-        test: /\.(png|jpg|gif|svg)$/,
-        loader: 'url',
-        options: {
-          limit: 1000, // 1KO
-          name: 'img/[name].[ext]?[hash]'
-        }
-      },
-      {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url',
-        query: {
-          limit: 1000, // 1 KO
-          name: 'fonts/[name].[hash:7].[ext]'
-        }
       }
     ]
   }

lib/nuxt.js

@@ -17,13 +17,7 @@ class Nuxt {
 
   constructor (options = {}, cb) {
     var defaults = {
-      filenames: {
-        css: 'style.css',
-        vendor: 'vendor.bundle.js',
-        app: 'nuxt.bundle.js'
-      },
       routes: [],
-      vendor: [],
       plugins: [],
       css: [],
       store: false,
@@ -56,9 +50,9 @@ class Nuxt {
     this.build = build.bind(this)
     // Launch build and set this.renderer
     return co(this.build)
-    .then((nuxt) => {
+    .then(() => {
-      if (typeof cb === 'function') cb(null, nuxt)
+      if (typeof cb === 'function') cb(null, this)
-      return nuxt
+      return this
     })
     .catch((err) => {
       if (typeof cb === 'function') cb(err)
@@ -125,9 +119,9 @@ class Nuxt {
         APP: html,
         context: context,
         files: {
-          css: join('/_nuxt/', self.options.filenames.css),
+          css: join('/_nuxt/', self.options.build.filenames.css),
-          vendor: join('/_nuxt/', self.options.filenames.vendor),
+          vendor: join('/_nuxt/', self.options.build.filenames.vendor),
-          app: join('/_nuxt/', self.options.filenames.app)
+          app: join('/_nuxt/', self.options.build.filenames.app)
         }
       })
       return app

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
   "main": "index.js",
   "license": "MIT",