JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/vue"></script>
<script src="https://rawgit.com/karol-f/vue-custom-element/master/dist/vue-custom-element.min.js"></script>
<h1>Vue Custom Element, No Polyfill</h1>
<script type="text/x-template" id="template_vuecustomelements--xtemplate">
<h1>{{message}}
<small>{{now}}</small>
</h1>
</script>
<vce-string message="Foo"></vce-string>
<vce-xtemplate message="Foo"></vce-xtemplate>
JavaScript
Vue.customElement('vce-string', {
props: [
'message',
],
data () {
return {
now: Date.now()
}
},
template: '<h1>{{message}} <small>{{now}}</small></h1>'
});
Vue.customElement('vce-xtemplate', {
props: [
'message',
],
data () {
return {
now: Date.now()
}
},
template: '#template_vuecustomelements--xtemplate'
});