Vue conditionally load Vue.use plugins

Viewed 286

I am using webpack conditional imports to conditionally load my Vue components, for example:

Vue.component('my-comp', () => import(/* webpackChunkName: "Components/MyComp" */ 'Components/MyComp'));

new Vue({
  el: '#vue_app',
});

All works as expected, the component import is only included if it used.

I am wondering if the same can be achieved for Vue.use. For example I am using the vue-textra package, which is included like this:

import Textra from 'vue-textra';
Vue.use(Textra);

However, I would like to do something like this:

Vue.use(() => import(/* webpackChunkName: "vue-textra" */ 'vue-textra'));

The above does not work.

When I look at the plugin definition, all it is doing is registering a component:

var Textra = {
  install: function install(Vue) {
    Vue.component("textra", TextraPlugin);
  }
};

Although I am using the above as a specific example, I suppose that some plugins will not register components and I wonder if conditional loading can apply for those plugins too.

0 Answers
Related