Can Vue be used to create components that can be instantiated onto custom tags rendered by a PHP application, similar to "custom elements light"?
While mounting the Vue instance onto the page root element seems to work, it appears that Vue uses the entire page as a template, potentially leading to performance issues and conflicts with other JavaScript code manipulating the DOM.
The objective is to gradually replace legacy jQuery code. Is there a common approach for tackling this issue?
Edit: Nesting these components is also a requirement, such as nested collapsibles.
Edit 2: Demonstrative fiddles showcasing the problem.
A solution using 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'];
// The nested <test> element won't be affected.
new Vue({
el:'test',
template: '#test-template',
});
// However, this method takes over the entire page.
Vue.component('test', {
template: '#test-template',
});
new Vue({
el: '#page',
});