How do I use a vue component without instantiating a root instance?

Question

Details

I am working on a website with different page setups.

My setup is not an SPA and so I do not have the privalige of one single root instance.

Problem

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

Example of the issue

I create my custom component as a global component:

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

According to the vue docs I have to register a root instance in order to use my component

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

<div class="header" id="root-instance">
  <mycomponent></mycomponent>
</div>

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

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

<div class="sidebar" id="other-root-instance">
  <mycomponent></mycomponent>
</div>

I tried using a class for instantiating, something like:

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

But view only loads this once.

Question

Is there any way to load a component but not instantiate a root instance every time I use it?

Note: I have several root instances on the page and therefore can not declare a single root instance for the page. Effectively I do not want to make my page a Single Page App.

Answer 1

You don't have to wrap your component in a root instance div, 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>