From d716b2ba39618a431b59b8561e98783039533a9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Tue, 8 Nov 2016 01:51:59 +0100 Subject: [PATCH 1/6] Get all css chunks + fix error handling --- lib/build/webpack/client.config.js | 5 ++++- lib/nuxt.js | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/lib/build/webpack/client.config.js b/lib/build/webpack/client.config.js index 6d7c426a5d..d5752dfacb 100644 --- a/lib/build/webpack/client.config.js +++ b/lib/build/webpack/client.config.js @@ -38,7 +38,10 @@ if (process.env.NODE_ENV === 'production') { vueConfig.loaders.less = ExtractTextPlugin.extract({ loader: 'css-loader!less-loader', fallbackLoader: 'vue-style-loader' }) config.plugins.push( - new ExtractTextPlugin('style.css'), + new ExtractTextPlugin({ + filename: 'style.css', + allChunks: true + }), // this is needed in webpack 2 for minifying CSS new webpack.LoaderOptionsPlugin({ minimize: true diff --git a/lib/nuxt.js b/lib/nuxt.js index e415e897d2..8cb588c025 100644 --- a/lib/nuxt.js +++ b/lib/nuxt.js @@ -61,7 +61,7 @@ class Nuxt { }) .catch((err) => { if (typeof cb === 'function') cb(err) - return err + return Promise.reject(err) }) } From 923b211a929392e7bb77e3e9326655229397ca13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Tue, 8 Nov 2016 01:54:53 +0100 Subject: [PATCH 2/6] Bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1c8a3f35a5..5de1a15d30 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nuxt", - "version": "0.2.1", + "version": "0.2.2", "description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)", "main": "index.js", "license": "MIT", From 90f8d5f1fb61fa7613883b430218a6f792206f0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Tue, 8 Nov 2016 02:57:55 +0100 Subject: [PATCH 3/6] Add .plugins option --- examples/plugins-vendor/README.md | 66 +++++++++++++++++++ examples/plugins-vendor/nuxt.config.js | 6 ++ examples/plugins-vendor/package.json | 11 ++++ examples/plugins-vendor/pages/about.vue | 16 +++++ examples/plugins-vendor/pages/index.vue | 13 ++++ .../plugins-vendor/plugins/vee-validate.js | 5 ++ lib/app/index.js | 9 +-- lib/build/index.js | 1 + lib/nuxt.js | 1 + package.json | 2 +- 10 files changed, 123 insertions(+), 7 deletions(-) create mode 100644 examples/plugins-vendor/README.md create mode 100644 examples/plugins-vendor/nuxt.config.js create mode 100644 examples/plugins-vendor/package.json create mode 100644 examples/plugins-vendor/pages/about.vue create mode 100644 examples/plugins-vendor/pages/index.vue create mode 100644 examples/plugins-vendor/plugins/vee-validate.js diff --git a/examples/plugins-vendor/README.md b/examples/plugins-vendor/README.md new file mode 100644 index 0000000000..74acb9cbde --- /dev/null +++ b/examples/plugins-vendor/README.md @@ -0,0 +1,66 @@ +# Using external modules and plugings with Nuxt.js + +## Configuration: `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`: +```js +const { join } = require('path') + +module.exports = { + vendor: [ + 'axios', // node module + join(__dirname, './js/my-library.js') // custom file + ] +} +``` + +## Configuration: `plugins` + +> Nuxt.js allows you to define js plugins to be ran before instantiating the root vue.js application + +I want to use [vee-validate](https://github.com/logaretm/vee-validate) to validate the data in my inputs, I need to setup the plugin before launching the app. + +File `plugins/vee-validate.js`: +```js +import Vue from 'vue' +import VeeValidate from 'vee-validate' + +Vue.use(VeeValidate) +``` + +Then, I add my file inside the `plugins` key of `nuxt.config.js`: +```js +const { join } = require('path') + +module.exports = { + vendor: ['vee-validate'], + plugins: [ join(__dirname, './plugins/vee-validate') ] +} +``` + +I added `vee-validate` in the `vendor` key to make sure that it won't be included in any other build if I call `require('vee-validate')`` in a component. + +### Only in browser build + +Some plugins might work only in the browser, for this, you can use the `process.BROWSER` variable to check if the bundle will be for the server or the client. + +Example: +```js +if (process.BROWSER) { + import Vue from 'vue' + import VeeValidate from 'vee-validate' + + Vue.use(VeeValidate) +} +``` + +## Demo + +```bash +npm install +npm start +``` + +Go to [http://localhost:3000](http://localhost:3000) and navigate trough the pages. diff --git a/examples/plugins-vendor/nuxt.config.js b/examples/plugins-vendor/nuxt.config.js new file mode 100644 index 0000000000..4435a56a69 --- /dev/null +++ b/examples/plugins-vendor/nuxt.config.js @@ -0,0 +1,6 @@ +const { join } = require('path') + +module.exports = { + vendor: ['axios', 'vee-validate'], + plugins: [ join(__dirname, './plugins/vee-validate.js') ] +} diff --git a/examples/plugins-vendor/package.json b/examples/plugins-vendor/package.json new file mode 100644 index 0000000000..95d1fcc1b4 --- /dev/null +++ b/examples/plugins-vendor/package.json @@ -0,0 +1,11 @@ +{ + "name": "shared-code", + "description": "", + "dependencies": { + "nuxt": "latest", + "vee-validate": "next" + }, + "scripts": { + "start": "nuxt" + } +} diff --git a/examples/plugins-vendor/pages/about.vue b/examples/plugins-vendor/pages/about.vue new file mode 100644 index 0000000000..a483179f07 --- /dev/null +++ b/examples/plugins-vendor/pages/about.vue @@ -0,0 +1,16 @@ + + + diff --git a/examples/plugins-vendor/pages/index.vue b/examples/plugins-vendor/pages/index.vue new file mode 100644 index 0000000000..7a6ab5c260 --- /dev/null +++ b/examples/plugins-vendor/pages/index.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/plugins-vendor/plugins/vee-validate.js b/examples/plugins-vendor/plugins/vee-validate.js new file mode 100644 index 0000000000..ef43e04444 --- /dev/null +++ b/examples/plugins-vendor/plugins/vee-validate.js @@ -0,0 +1,5 @@ +// This code will be injected before initializing the root App +import Vue from 'vue' +import VeeValidate from 'vee-validate' + +Vue.use(VeeValidate) diff --git a/lib/app/index.js b/lib/app/index.js index a280faca6b..7da6b996cb 100644 --- a/lib/app/index.js +++ b/lib/app/index.js @@ -4,12 +4,9 @@ import Vue from 'vue' import router from './router' <% if (store && storePath) { %>import store from '<%= storePath %>'<% } %> -// import VueProgressBar from './plugins/vue-progressbar' -// Vue.use(VueProgressBar, { -// color: '#efc14e', -// failedColor: 'red', -// height: '2px' -// }) +<% plugins.forEach(function (pluginPath) { %> +require('<%= pluginPath %>') +<% }) %> import App from './App.vue' // create the app instance. diff --git a/lib/build/index.js b/lib/build/index.js index d4eff360b8..8f5e0fb0fa 100644 --- a/lib/build/index.js +++ b/lib/build/index.js @@ -82,6 +82,7 @@ module.exports = function * () { isDev: this.isDev, store: this.options.store, css: this.options.css, + plugins: this.options.plugins.map((p) => r(this.dir, p)), loading: (this.options.loading === 'string' ? r(this.dir, this.options.loading) : this.options.loading), components: { Loading: r(__dirname, '..', 'app', 'components', 'Loading.vue'), diff --git a/lib/nuxt.js b/lib/nuxt.js index 8cb588c025..7c62108223 100644 --- a/lib/nuxt.js +++ b/lib/nuxt.js @@ -24,6 +24,7 @@ class Nuxt { }, routes: [], vendor: [], + plugins: [], css: [], store: false, cache: false, diff --git a/package.json b/package.json index 5de1a15d30..41680b1112 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nuxt", - "version": "0.2.2", + "version": "0.2.3", "description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)", "main": "index.js", "license": "MIT", From d47775ebfdb17b6e69707ffdfe5bb1a34006c1c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Tue, 8 Nov 2016 03:39:57 +0100 Subject: [PATCH 4/6] Update plugins-vendor example (now working) --- examples/plugins-vendor/README.md | 24 ++++++++--------- examples/plugins-vendor/nuxt.config.js | 4 +-- examples/plugins-vendor/package.json | 4 ++- examples/plugins-vendor/pages/index.vue | 25 ++++++++++++++---- .../plugins-vendor/plugins/vee-validate.js | 5 ---- .../plugins/vue-notifications.js | 26 +++++++++++++++++++ 6 files changed, 63 insertions(+), 25 deletions(-) delete mode 100644 examples/plugins-vendor/plugins/vee-validate.js create mode 100644 examples/plugins-vendor/plugins/vue-notifications.js diff --git a/examples/plugins-vendor/README.md b/examples/plugins-vendor/README.md index 74acb9cbde..7ae87dd476 100644 --- a/examples/plugins-vendor/README.md +++ b/examples/plugins-vendor/README.md @@ -20,14 +20,14 @@ module.exports = { > Nuxt.js allows you to define js plugins to be ran before instantiating the root vue.js application -I want to use [vee-validate](https://github.com/logaretm/vee-validate) to validate the data in my inputs, I need to setup the plugin before launching the app. +I want to use [vue-notifications](https://github.com/se-panfilov/vue-notifications) to validate the data in my inputs, I need to setup the plugin before launching the app. -File `plugins/vee-validate.js`: +File `plugins/vue-notifications.js`: ```js import Vue from 'vue' -import VeeValidate from 'vee-validate' +import VueNotifications from 'vue-notifications' -Vue.use(VeeValidate) +Vue.use(VueNotifications) ``` Then, I add my file inside the `plugins` key of `nuxt.config.js`: @@ -35,24 +35,24 @@ Then, I add my file inside the `plugins` key of `nuxt.config.js`: const { join } = require('path') module.exports = { - vendor: ['vee-validate'], - plugins: [ join(__dirname, './plugins/vee-validate') ] + vendor: ['vue-notifications'], + plugins: [ join(__dirname, './plugins/vue-notifications') ] } ``` -I added `vee-validate` in the `vendor` key to make sure that it won't be included in any other build if I call `require('vee-validate')`` in a component. +I added `vue-notifications` in the `vendor` key to make sure that it won't be included in any other build if I call `require('vue-notifications')` in a component. ### Only in browser build -Some plugins might work only in the browser, for this, you can use the `process.BROWSER` variable to check if the bundle will be for the server or the client. +Some plugins might work only in the browser, for this, you can use the `process.BROWSER` variable to check if the plugin will run from the server or from the client. Example: ```js -if (process.BROWSER) { - import Vue from 'vue' - import VeeValidate from 'vee-validate' +import Vue from 'vue' +import VueNotifications from 'vue-notifications' - Vue.use(VeeValidate) +if (process.BROWSER) { + Vue.use(VueNotifications) } ``` diff --git a/examples/plugins-vendor/nuxt.config.js b/examples/plugins-vendor/nuxt.config.js index 4435a56a69..f7cbe9b2ad 100644 --- a/examples/plugins-vendor/nuxt.config.js +++ b/examples/plugins-vendor/nuxt.config.js @@ -1,6 +1,6 @@ const { join } = require('path') module.exports = { - vendor: ['axios', 'vee-validate'], - plugins: [ join(__dirname, './plugins/vee-validate.js') ] + vendor: ['axios', 'mini-toastr', 'vue-notifications'], + plugins: [ join(__dirname, './plugins/vue-notifications.js') ] } diff --git a/examples/plugins-vendor/package.json b/examples/plugins-vendor/package.json index 95d1fcc1b4..7b6278e1bb 100644 --- a/examples/plugins-vendor/package.json +++ b/examples/plugins-vendor/package.json @@ -2,8 +2,10 @@ "name": "shared-code", "description": "", "dependencies": { + "axios": "^0.15.2", + "mini-toastr": "^0.3.10", "nuxt": "latest", - "vee-validate": "next" + "vue-notifications": "^0.7.0" }, "scripts": { "start": "nuxt" diff --git a/examples/plugins-vendor/pages/index.vue b/examples/plugins-vendor/pages/index.vue index 7a6ab5c260..76a98cb73a 100644 --- a/examples/plugins-vendor/pages/index.vue +++ b/examples/plugins-vendor/pages/index.vue @@ -1,13 +1,28 @@ diff --git a/examples/plugins-vendor/plugins/vee-validate.js b/examples/plugins-vendor/plugins/vee-validate.js deleted file mode 100644 index ef43e04444..0000000000 --- a/examples/plugins-vendor/plugins/vee-validate.js +++ /dev/null @@ -1,5 +0,0 @@ -// This code will be injected before initializing the root App -import Vue from 'vue' -import VeeValidate from 'vee-validate' - -Vue.use(VeeValidate) diff --git a/examples/plugins-vendor/plugins/vue-notifications.js b/examples/plugins-vendor/plugins/vue-notifications.js new file mode 100644 index 0000000000..93a21f1e60 --- /dev/null +++ b/examples/plugins-vendor/plugins/vue-notifications.js @@ -0,0 +1,26 @@ +// This code will be injected before initializing the root App +import Vue from 'vue' +import VueNotifications from 'vue-notifications' + +if (process.BROWSER) { + // Include mini-toaster (or any other UI-notification library + const miniToastr = require('mini-toastr') + + // Here we setup messages output to `mini-toastr` + const toast = function ({ title, message, type, timeout, cb }) { + return miniToastr[type](message, title, timeout, cb) + } + + // Binding for methods .success(), .error() and etc. You can specify and map your own methods here. + // Required to pipe our outout to UI library (mini-toastr in example here) + // All not-specifyed events (types) would be piped to output in console. + const options = { + success: toast, + error: toast, + info: toast, + warn: toast + } + + // Activate plugin + Vue.use(VueNotifications, options) +} From 90a97d76ce938be645f82f538a268a83b4c9630d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Tue, 8 Nov 2016 03:48:18 +0100 Subject: [PATCH 5/6] Add style to plugins-vendor example --- examples/plugins-vendor/pages/about.vue | 12 ++++++++++-- examples/plugins-vendor/pages/index.vue | 10 +++++++++- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/examples/plugins-vendor/pages/about.vue b/examples/plugins-vendor/pages/about.vue index a483179f07..da2464fc0e 100644 --- a/examples/plugins-vendor/pages/about.vue +++ b/examples/plugins-vendor/pages/about.vue @@ -1,5 +1,5 @@