diff --git a/README.md b/README.md index ffe9c64bb3..f6d8a3b033 100644 --- a/README.md +++ b/README.md @@ -62,11 +62,12 @@ For these reasons, Nuxt.js targets Node.js `4.0` or higher (you might want to la const Nuxt = require('nuxt') const options = { - routes: [], // merged with pages/*.vue routes - css: ['/dist/boostrap.css'] // added to global app (App.vue) - store: true // use vuex and require('./store') - vendor: ['axios', 'public/plugin.js'], // Add vendors in vendor-bundle.js - loading: false or { color: "blue", error: "red" } or 'components/loader' + 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 } // Launch nuxt build with given options diff --git a/examples/plugins-vendor/README.md b/examples/plugins-vendor/README.md new file mode 100644 index 0000000000..7ae87dd476 --- /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 [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/vue-notifications.js`: +```js +import Vue from 'vue' +import VueNotifications from 'vue-notifications' + +Vue.use(VueNotifications) +``` + +Then, I add my file inside the `plugins` key of `nuxt.config.js`: +```js +const { join } = require('path') + +module.exports = { + vendor: ['vue-notifications'], + plugins: [ join(__dirname, './plugins/vue-notifications') ] +} +``` + +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 plugin will run from the server or from the client. + +Example: +```js +import Vue from 'vue' +import VueNotifications from 'vue-notifications' + +if (process.BROWSER) { + Vue.use(VueNotifications) +} +``` + +## 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..f7cbe9b2ad --- /dev/null +++ b/examples/plugins-vendor/nuxt.config.js @@ -0,0 +1,6 @@ +const { join } = require('path') + +module.exports = { + 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 new file mode 100644 index 0000000000..7b6278e1bb --- /dev/null +++ b/examples/plugins-vendor/package.json @@ -0,0 +1,13 @@ +{ + "name": "shared-code", + "description": "", + "dependencies": { + "axios": "^0.15.2", + "mini-toastr": "^0.3.10", + "nuxt": "latest", + "vue-notifications": "^0.7.0" + }, + "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..da2464fc0e --- /dev/null +++ b/examples/plugins-vendor/pages/about.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/examples/plugins-vendor/pages/index.vue b/examples/plugins-vendor/pages/index.vue new file mode 100644 index 0000000000..e420072fd0 --- /dev/null +++ b/examples/plugins-vendor/pages/index.vue @@ -0,0 +1,36 @@ + + + + + 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) +} 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/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..7c62108223 100644 --- a/lib/nuxt.js +++ b/lib/nuxt.js @@ -24,6 +24,7 @@ class Nuxt { }, routes: [], vendor: [], + plugins: [], css: [], store: false, cache: false, @@ -61,7 +62,7 @@ class Nuxt { }) .catch((err) => { if (typeof cb === 'function') cb(err) - return err + return Promise.reject(err) }) } diff --git a/package.json b/package.json index 1c8a3f35a5..41680b1112 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nuxt", - "version": "0.2.1", + "version": "0.2.3", "description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)", "main": "index.js", "license": "MIT",