Nuxt.js: [question] Plugins vs Modules vs Vendor

Created on 12 Feb 2018 · 4Comments · Source: nuxt/nuxt.js

Hello, this a probably a noob question but i still do not have a clear understating of the differences.

What i know is that vendor is used for things you need a lot and do not re include in every page.
On the official websites it says Modules is for nuxt modules what does that mean? If i want to use vue-notification or vue-select is that a module or plugin?

One more question: if in a plugin i do: Vue.use(pluginName) doesn't that mean that it is available in Vue globally and can be used in any page which means no need to add that plugin in build/vendor?

_{This question is available on Nuxt.js community (#c2449)}

Source

fanckush

Most helpful comment

When you want to use someone else's code in your application, or some code that does not belong to your application, but is simply used as a library in your application, you should add it to the vendor, so the code will be added to vendor file and can be cached by browser and your application will be smaller.
Plugin is one of the ways to embed these libraries into your application. For example, to not include axios in the component of each page, you can write a plugin that imports axios and embeds it in the prototype Vue objects, context, storage, etc.
But the module it is an extension to your whole nuxt.js application. For example, you can write a module, that will add vue-notification to vendor and also will add the plugin that will import vue-notification and make Vue to use it. Read documentation there are very good examples

About last question - yes it will be available globally. But you still have to add it to vendor, because otherwise the code of this library will be like a part of your application, not like a library

ArStah on 13 Feb 2018

👍19 ❤2 😄2

All 4 comments

When you want to use someone else's code in your application, or some code that does not belong to your application, but is simply used as a library in your application, you should add it to the vendor, so the code will be added to vendor file and can be cached by browser and your application will be smaller.
Plugin is one of the ways to embed these libraries into your application. For example, to not include axios in the component of each page, you can write a plugin that imports axios and embeds it in the prototype Vue objects, context, storage, etc.
But the module it is an extension to your whole nuxt.js application. For example, you can write a module, that will add vue-notification to vendor and also will add the plugin that will import vue-notification and make Vue to use it. Read documentation there are very good examples

About last question - yes it will be available globally. But you still have to add it to vendor, because otherwise the code of this library will be like a part of your application, not like a library

ArStah on 13 Feb 2018

👍19 ❤2 😄2

This question has been resolved by @ArStah, see answer.

cmty[bot] on 8 Aug 2018

I was quite confused by plugins and modules. Now I seem to have a better understanding and want to put my answer here.

It seems that one, maybe the most important, difference that neither the document nor this post properly addressed, is that:
Plugin is something be imported in client application. That means it's imported either in browser, or when server doing server side rendering.
Module is something be executed upon nuxt boot up, and is able to customize the nuxt application in almost any way. For example, module can add a plugin to the nuxt application.
However, can we skip the plugin and just let module do the work of plugin (like calling Vue.use)? No. Module is executed upon nuxt boot up, meaning it's executed on the nuxt server, or nuxt generate, but not on browser. So module can add a plugin to the nuxt application but cannot skip the plugin and just do something the plugin suppose to do.

I have just started working with nuxt so please correct me if I'm wrong.