Add .plugins option

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.

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

examples/plugins-vendor/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "shared-code",
+  "description": "",
+  "dependencies": {
+    "nuxt": "latest",
+    "vee-validate": "next"
+  },
+  "scripts": {
+    "start": "nuxt"
+  }
+}

examples/plugins-vendor/pages/about.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <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/1').then(res => res.data)
+  }
+}
+</script>

examples/plugins-vendor/pages/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <p>Home - <router-link to="/about">About</router-link></p>
+    <p>
+      <input v-validate data-rules="required|email" type="text" name="email">
+      <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>

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)

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/nuxt.js

@@ -24,6 +24,7 @@ class Nuxt {
       },
       routes: [],
       vendor: [],
+      plugins: [],
       css: [],
       store: false,
       cache: false,

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