Merge remote-tracking branch 'Atinux/master'

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
+  routes: [], // see examples/custom-routes
-  css: ['/dist/boostrap.css'] // added to global app (App.vue)
+  css: ['/dist/boostrap.css'] // see examples/global-css
-  store: true // use vuex and require('./store')
+  store: true // see examples/vuex-store
-  vendor: ['axios', 'public/plugin.js'], // Add vendors in vendor-bundle.js
+  vendor: ['axios'], // see examples/plugins-vendor
-  loading: false or { color: "blue", error: "red" } or 'components/loader'
+  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

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.

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') ]
+}

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"
+  }
+}

examples/plugins-vendor/pages/about.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="container">
+    <img :src="thumbnailUrl" />
+    <p><router-link to="/">Home</router-link> - About</p>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data () {
+    return axios.get('http://jsonplaceholder.typicode.com/photos/4').then(res => res.data)
+  }
+}
+</script>
+
+<style>
+.container {
+  text-align: center;
+  padding-top: 100px;
+  font-family: sans-serif;
+}
+</style>

examples/plugins-vendor/pages/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="container">
+    <p><button @click="showLoginError">Notif me!</button></p>
+    <p>Home - <router-link to="/about">About</router-link></p>
+  </div>
+</template>
+
+<script>
+let miniToastr
+if (process.BROWSER) {
+  miniToastr = require('mini-toastr')
+}
+
+export default {
+  mounted () {
+    if (process.BROWSER) {
+      miniToastr.init()
+    }
+  },
+  notifications: {
+    showLoginError: {
+      title: 'Welcome!',
+      message: 'Hello from nuxt.js',
+      type: 'info'
+    }
+  }
+}
+</script>
+
+<style>
+.container {
+  text-align: center;
+  padding-top: 100px;
+  font-family: sans-serif;
+}
+</style>

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)
+}

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'
+<% plugins.forEach(function (pluginPath) { %>
-// Vue.use(VueProgressBar, {
+require('<%= pluginPath %>')
-//   color: '#efc14e',
+<% }) %>
-//   failedColor: 'red',
-//   height: '2px'
-// })
 
 import App from './App.vue'
 // create the app instance.

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'),

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

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)
     })
   }
 

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",