将Vue.js混合到现有的SSR网站中？

Question

Is it possible/viable to use Vue to create components that get instantiated onto custom tags rendered by eg a PHP application? Some kind of "custom elements light"?

It "works" if I mount the Vue instance onto the page root element, but - as far as I understand - Vue uses the whole page as a template in this case. And I imagine this could be a performance issue and cause trouble if other javascript code messes with the DOM.

The goal is to progressively replace legacy jQuery code. Is there an common approach for this problem?

Edit: Nesting these components is also a requirement. A simple example would be nested collapsibles.

Edit 2: Some fiddles to illustrate the problem.

A working solution based on riot.js: https://jsfiddle.net/36xju9sh/

<div id="page">
  <!-- This is supposed to show "This is a test." twice. -->
  <test>
    <test></test>
  </test>
</div>
<script type="riot/tag">
  <test>
    <p>This is a test.</p>
    <yield/>
  </test>
</script>
<script>riot.mount('*')</script>

Two approaches using Vue.js: https://jsfiddle.net/89ejjjsy/1/

HTML:

<div id="page">
  <!-- This is supposed to show "This is a test." twice. -->
  <test>
    <test></test>
  </test>
</div>
<script type="text/x-template" id="test-template">
  <p>This is a test.</p>
  <slot></slot>
</script>

Javascript:

Vue.config.ignoreCustomElements = ['test'];

// This won't hit the nested <test> element.
new Vue({
    el:'test',
    template: '#test-template',
});

// This does, but takes over the whole page.
Vue.component('test', {
    template: '#test-template',
});

new Vue({
  el: '#page',
});

Answer 1

You do not have to use whole page as Vue instance scope. It is more than ok to for example, use #comments-container as scope for comments component which will be nested somewhere on your page.

You can have multiple VueJS instances on one page.