How to lazy load a plugin in Vue?

Question

Vue plugins usually requires a global setup in app entrypoint by Vue.use(somePlugin). Doing so increases the bundle size for all pages, which is often bad and that it is better to defer the downloading of the module until when the module is actually being used, aka lazy loading or code spliting.

How do I lazy load a plugin if only one page in my Vue app needs it?

Answer 1

To answer the OP's question more directly: You can't lazy load a plugin.

According to the documentation, plugins by definition provide globally-accessible functionality and must be setup with Vue.use() before the Vue instance is created. Due to this, they'll always be bundled with the entire Vue instance (in a vendors chunk, for example).

What you want is to lazy load the functionality in a smaller scope, at a component level. Depending on the plugin, the plugin module should also support some sort of direct code importing at a component level, like this one does. Because it just uses import statements, they can be async loaded.

TL;DR: Anything using Vue.use() can't be lazy loaded. Async imports can.