diff --git a/README.md b/README.md
index f6d8a3b033..553933f932 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
## Under development, will be release soon :fire:
-# nuxt.js
->A minimalistic framework for server-rendered Vue applications (inspired from [Next.js](https://github.com/zeit/next.js))
+
+> Nuxt.js is a minimalistic framework for server-rendered Vue applications (inspired by [Next.js](https://github.com/zeit/next.js))
## How to use
@@ -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
diff --git a/examples/async-data/nuxt.config.js b/examples/async-data/nuxt.config.js
index 0eb31b286d..9aba646513 100644
--- a/examples/async-data/nuxt.config.js
+++ b/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',
diff --git a/examples/custom-build/assets/nuxt.png b/examples/custom-build/assets/nuxt.png
new file mode 100644
index 0000000000..a48bda6be8
Binary files /dev/null and b/examples/custom-build/assets/nuxt.png differ
diff --git a/examples/custom-build/nuxt.config.js b/examples/custom-build/nuxt.config.js
new file mode 100644
index 0000000000..9625400c40
--- /dev/null
+++ b/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]'
+ }
+ }
+ ]
+ }
+}
diff --git a/examples/custom-build/package.json b/examples/custom-build/package.json
new file mode 100644
index 0000000000..b9a104231d
--- /dev/null
+++ b/examples/custom-build/package.json
@@ -0,0 +1,10 @@
+{
+ "name": "custom-build",
+ "description": "",
+ "dependencies": {
+ "nuxt": "latest"
+ },
+ "scripts": {
+ "start": "nuxt"
+ }
+}
diff --git a/examples/custom-build/pages/index.vue b/examples/custom-build/pages/index.vue
new file mode 100644
index 0000000000..421cbb3a07
--- /dev/null
+++ b/examples/custom-build/pages/index.vue
@@ -0,0 +1,16 @@
+
+
+
+
This image is included as data:image/png;base64...
+
In the source code, the files generated are based on the build.filenames data.
+
If you look at the vendor.js, lodash has been included (cmd/ctrl + F "lodash").
+
+
+
+
diff --git a/examples/head-elements/pages/index.vue b/examples/head-elements/pages/index.vue
index 8896993d85..f61d0a18cb 100755
--- a/examples/head-elements/pages/index.vue
+++ b/examples/head-elements/pages/index.vue
@@ -1,4 +1,9 @@
+
+ I am the title of the page
+
+
+
This page has a title 🤔
diff --git a/examples/hello-world/pages/about.vue b/examples/hello-world/pages/about.vue
index 0b121b4e33..934bfbfe09 100755
--- a/examples/hello-world/pages/about.vue
+++ b/examples/hello-world/pages/about.vue
@@ -2,7 +2,7 @@
About
-
Home
+
Home
diff --git a/examples/hello-world/pages/index.vue b/examples/hello-world/pages/index.vue
index 30ec792d62..52c820e2d7 100755
--- a/examples/hello-world/pages/index.vue
+++ b/examples/hello-world/pages/index.vue
@@ -2,7 +2,7 @@
Hello World.
-
About
+
About
diff --git a/examples/hello-world/static/nuxt.png b/examples/hello-world/static/nuxt.png
index b9b484a432..a48bda6be8 100644
Binary files a/examples/hello-world/static/nuxt.png and b/examples/hello-world/static/nuxt.png differ
diff --git a/examples/plugins-vendor/README.md b/examples/plugins-vendor/README.md
index 7ae87dd476..567ed6516d 100644
--- a/examples/plugins-vendor/README.md
+++ b/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 = {
- vendor: [
- 'axios', // node module
- join(__dirname, './js/my-library.js') // custom file
- ]
+ 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') ]
}
```
diff --git a/examples/plugins-vendor/nuxt.config.js b/examples/plugins-vendor/nuxt.config.js
index f7cbe9b2ad..fa08ade53c 100644
--- a/examples/plugins-vendor/nuxt.config.js
+++ b/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') ]
}
diff --git a/examples/vuex-store/README.md b/examples/vuex-store/README.md
index 4b68b5dfee..9fdf8a9d2c 100644
--- a/examples/vuex-store/README.md
+++ b/examples/vuex-store/README.md
@@ -72,4 +72,4 @@ export default {
## Context
-To see the list of available keys in `context`, take a look at [this documentation](https://github.com/Atinux/nuxt.js/tree/master/examples/async-data#context).
+To see the list of available keys in `context`, take a look at [this documentation](https://github.com/nuxt/nuxt.js/tree/master/examples/async-data#context).
diff --git a/lib/app/App.vue b/lib/app/App.vue
index ce4f28c449..3c9982f91c 100644
--- a/lib/app/App.vue
+++ b/lib/app/App.vue
@@ -1,14 +1,14 @@
- <% if (loading) { %><% } %>
+ <% if (loading) { %><% } %>
-
+
diff --git a/lib/app/client.js b/lib/app/client.js
index 9eeb8bb32e..9f7040b4cc 100644
--- a/lib/app/client.js
+++ b/lib/app/client.js
@@ -172,7 +172,7 @@ Promise.all(resolveComponents)
router.beforeEach(render.bind(_app))
// Call window.onModulesLoaded for jsdom testing (https://github.com/tmpvar/jsdom#dealing-with-asynchronous-script-loading)
if (typeof window.onNuxtReady === 'function') {
- window.onNuxtReady()
+ window.onNuxtReady(_app)
}
})
.catch((err) => {
diff --git a/lib/build/index.js b/lib/build/index.js
index 8f5e0fb0fa..18f6e19f71 100644
--- a/lib/build/index.js
+++ b/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
diff --git a/lib/build/webpack/base.config.js b/lib/build/webpack/base.config.js
index 2b325ef200..7c2c3a8c25 100644
--- a/lib/build/webpack/base.config.js
+++ b/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]'
- }
}
]
}
diff --git a/lib/nuxt.js b/lib/nuxt.js
index 7c62108223..6918ba9d6d 100644
--- a/lib/nuxt.js
+++ b/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) => {
- if (typeof cb === 'function') cb(null, nuxt)
- return nuxt
+ .then(() => {
+ if (typeof cb === 'function') cb(null, this)
+ 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),
- vendor: join('/_nuxt/', self.options.filenames.vendor),
- app: join('/_nuxt/', self.options.filenames.app)
+ css: join('/_nuxt/', self.options.build.filenames.css),
+ vendor: join('/_nuxt/', self.options.build.filenames.vendor),
+ app: join('/_nuxt/', self.options.build.filenames.app)
}
})
return app
diff --git a/package.json b/package.json
index 41680b1112..a61a4888e9 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
{
"name": "nuxt",
- "version": "0.2.3",
+ "version": "0.2.5",
"description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
"main": "index.js",
"license": "MIT",
- "repository": "Atinux/nuxt.js",
+ "repository": "nuxt/nuxt.js",
"bin": {
"nuxt": "./bin/nuxt"
},