Takes an HTML string with Vue.js syntax and converts it to a normal HTML string.

vueToHTML.js

function vueToHTML(vueHTML, data, onRender) {
  function onUpdated() {
    this.$nextTick(function () {
      onRender(this.$el.innerHTML);
    });
  }

  return new Vue({
    template: '<div>' + vueHTML + '</div>',
    el: document.createElement('div'),
    data: Object(data),
    mounted: onUpdated,
    updated: onUpdated
  });
}

~Documentation - vueToHTML.md

vueToHTML(…)

This function can be used to take an HTML string containing Vue Syntax and convert it to a regular HTML string.

Parameters

1. vueHTML string

   The HTML string containing Vue Syntax that is to be converted to a regular HTML string.

2. data Object|null

   The data object that can be referenced in order to render vueHTML with the specified data. If null is given a blank object will be used as the data source.

3. onRender function(html)

   The callback function to be called with the resulting rendered HTML string. This is called 1st when the function is called and vueHTML is rendered. It is also called if data is changed thusly triggering an update of the rendered HTML.

Returns

The Vue instance that is used to render the desired HTML.

Example run:

vueToHTML(
  '<div v-for="a in [1,2,3]">{{a}}</div>',
  null,
  function(output) {
    console.log('Output:', output);
  }
);

Another example run:

vueToHTML(
  '<div v-for="a in arr">{{a}}</div>',
  { arr: [9,8,7,6,5,4,3,2,1] },
  function (output) {
    console.log('Output:', output);
  }
);