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.

Are you using your own text editor or it is a third party library? Can you just mention what text editor are you using? — Nurul Huda
– Nurul Huda, Commented Jul 28, 2019 at 21:58
To be clear, the problem you've got is that there's a version mismatch between text editor & the rest of the page? ie "Now we have a text editor on our site and this editor has a Vue version" — Victor
– Victor, Commented Jul 29, 2019 at 5:17

tony19 · Accepted Answer · 2022-07-15 22:25:09Z

3

+25

Try loading TextEditor.vue asynchronously.

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

Reference.

edited Jul 15, 2022 at 22:25

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 22, 2019 at 19:43

Andrew Vasylchuk

4,7792 gold badges14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steven Spungin · Accepted Answer · 2019-07-22 09:46:51Z

3

You can modify the CSS for the editor to position:fixed or position:absolute and put it inside your app component. Then use a v-if to toggle visibility.

You can also wrap your editor using a 3rd party dialog component to wrap it into a modal popup window.

Another unrelated suggestion is to use lazy loading if the component has a large size.

edited Jul 22, 2019 at 9:46

answered Jul 19, 2019 at 11:00

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

Comments

GenericUser · Accepted Answer · 2019-07-28 04:32:48Z

You can merge multiple Vue files together through imports and the components property within a .vue file.

<template>
   <div>
      <TextEditor></TextEditor>
   </div>
</template>

<script>
import TextEditor from 'path/to/TextEditor.vue';

export default {
   name: 'Main',
   components: {
      TextEditor
   }
}
</script>

Furthermore, you can set this to be a dynamic import. If your project was set up with vue-cli, you should already have webpack installed. If that's the case then you can also set the dynamic import to have one of two types: prefetch or preload. Essentially prefetch downloads files when the app is idle and preload downloads it in parallel to the main component. Implementing either of those aspects ends up looking like this:

export default {
   name: 'Main',
   components: {
      TextEditor: import(/* webpackPrefetch: true */ 'path/to/TextEditor.vue')
      /* OR */
      // TextEditor: import(/* webpackPreload: true */ 'path/to/TextEditor.vue')
   }
}

Daniel Richter · Accepted Answer · 2019-07-29 01:18:26Z

1

You should take a look at splitting your bundle into chunks: https://webpack.js.org/guides/code-splitting/

Only load your text editor chunk on pages that require it.

answered Jul 29, 2019 at 1:18

Daniel Richter

3581 gold badge5 silver badges25 bronze badges

Comments

Nishant Arora · Accepted Answer · 2019-07-23 22:39:12Z

0

You can put a Vue instance inside another Vue instance.

Let's say I have the following HTML

<div id="main-app"></div>


new Vue({
  el: "#main-app",
  template: `<div>
        This is my main application which has an editor div
        <div id="editor"></div>
     </div>`
});


new Vue({
  el: "#editor",
  template: `<div>
        This is my editor component
     </div>`
});

The final resulting HTML would be

<div>
  This is my main application which has an editor div
  <div>
    This is my editor component
  </div>
</div>

answered Jul 23, 2019 at 22:39

Nishant Arora

3881 gold badge5 silver badges10 bronze badges

Collectives™ on Stack Overflow

VueJS - Load separate component into vue instance

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related