Load vue-konva via dynamic import

[janwidmer]

I am using vue-konva in a certain CMS Component. To keep my main bundle small, I would like to only load vue-konva (and konva) via dynamic import within my cms component, if that component is actually rendered on a certain page.

The problem is, that the call Vue.use(VueKonva); can only be done in the main app.

It would be great, if vue-konva would offer a component based import option to do something like this:

export default {
    components: () => {
      const { vStage, vText, vImage } = import(/* webpackChunkName: "vue-konva" */ 'vue-konva');
      
      return {
        vStage,
        vText,
        vImage
      };
    },
}

[francoislevesque]

We have a similar request! Per component import could greatly improve our app loading performance.

[theoephraim]

Would definitely like to see individual component imports.

Global component registration via plugins (how things are currently working) is a useful pattern when folks are just getting started with vue, but it is definitely not the recommended way of doing things, especially when you add typescript into the mix.

[mineichen]

I'd like to use vue-konva to create webcomponents which can easily be used in foreign code.
Therefore, global imports are not an option and I have to use the following hack in every component which uses Konva :-S

<script lang="ts">
import UseKonva from "vue-konva";

let components = {} as { [key: string]: any };

UseKonva.install({
  component(key: string, component: any) {
    components[key] = component;
  },
});

export default {
  components,
};
</script>

[olelis]

Based on the @mineichen comment.

If you want to dynamically import VueKonva without using Vue.use(VueKonva), then this code can help you.

Add this to the separate file:

import VueKonva from "vue-konva";
export function getKonvaComponents() {
    let components = {};
    VueKonva.install({
        component(key, component) {
            components[key] = component;
        },
    });
    return components;
}

In the vue file, add components row:

import {getKonvaComponents} from "./konva";
export default {
....
  components: {...getKonvaComponents()}, 
...
}

You have to add components row to each vue file that uses VueKonva components