VueJS - Load separate component into vue instance

Question

At my job I'm currently in the progress of a redesign of our web platform, including moving a lot of old javascript / jquery into VueJS.

I have a global.js file which holds our Vue components and we have a vendor.js which holds Vue, Axios, Vuex,...

Now we have a text editor on our site and this editor has a Vue version. The problem is that this text editor is pretty big, almost 500kb minified for production. So I've created a separate component in a separate file for this editor, since we only need it on two pages.

Now, since my global Vue takes up the whole page I cannot insert the text editor into it because you can't put a Vue instance inside another Vue instance.

Is there a way that I can keep the editor as a totally separate file but somehow use the global Vue instance when it gets loaded on a page?

I've searched for quite a bit but haven't come across this problem anywhere. Maybe it's not possible to do this.

Answer 1

Try loading TextEditor.vue asynchronously.

new Vue({
  // ...
  components: {
    TextEditor: () => import("./TextEditor.vue")
  }
})

Reference.