JSFiddle - React, Tailwind, and code Playground

by mckabue

HTML

<div id="vue-base-element">
    <div id="app">
        <span v-html="rawHtml()"></span>
        <div><input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p></div>
    </div>
</div>

JavaScript

var vueTemplate = function (model) {
            var el = document.createElement('DIV'),
                vm = new Vue((model || {}));

            el.style.display = "none";
            document.body.appendChild(el);
            vm.$mount(el);
            el = vm.$el;
            document.body.removeChild(el);
            return vm.$el;
        };

var model = {
        data: {
            message: "message"
        },
        methods: {
            rawHtml: function () {
                var html = vueTemplate({
                    template: '<div><input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p></div>',
                    data: {
                        message: "message"
                    }
                });

                document.body.appendChild(html);
                return html.innerHTML;
            }
        },
        created: function () {

        }
    };

    var viewModel = new Vue(model);

    viewModel.$mount('#vue-base-element');