Nuxt/examples/plugins-vendor

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:

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 to validate the data in my inputs, I need to setup the plugin before launching the app.

File plugins/vee-validate.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:

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:

if (process.BROWSER) {
  import Vue from 'vue'
  import VeeValidate from 'vee-validate'

  Vue.use(VeeValidate)
}

Demo

npm install
npm start

Go to http://localhost:3000 and navigate trough the pages.