How to use vue component without instantiating a root?

Question

More details

I am working on a site with different page settings.

My setup is not SPA , so I do not have the priority of a single root instance.

Problem

This means that if I create a component, I have to register an instance of root vue every time I want to use my component.

Problem example

I create my custom component as a global component:

Vue.component('mycomponent', { /* options */ }); 

According to vue docs, I need to register the root instance in order to use my component

 new Vue({ el: '#root-instance' }); <div class="header" id="root-instance"> <mycomponent></mycomponent> </div> 

Then in another section I want to use the same component, but I need to create a different root instance:

 new Vue({ el: '#other-root-instance' }); <div class="sidebar" id="other-root-instance"> <mycomponent></mycomponent> </div> 

I tried using the class to instantiate, something like:

 new Vue({ el: '.root-instance' }); 

But viewing loads only once.

Question

Is there a way to download the component, but not create an instance of root every time I use it?

Note. I have several root instances on the page and therefore cannot declare one root instance for this page. In fact, I do not want my page to be in a single page application.

Answer 1

You do not need to wrap your component in the root instance of the instance; you can make the component tag the root instance.

 Vue.component('myComponent', { props: ['custom'], template: '<div>Hi there, I am the {{custom}}</div>' }); new Vue({ el: '#sidebar' }); new Vue({ el: '#topmenu' }); 

 <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script> <my-component id="sidebar" custom="sidebar"></my-component> <div> Some stuff that is not under Vue control {{custom}} </div> <my-component id="topmenu" custom="top menu"></my-component>