Generate Vue Component with vanilla JS

Question

I am currently using the bootstrap table component to display a list (bootstrap-table.com)

This component (or jQuery plugin wrapped within a vue component) has a formatter for each column.

example with source code: https://examples.bootstrap-table.com/#welcomes/vue-component.html#view-source

I need to build a more complex set of links which involve some js processing that could easily be done with vue.

Instead of the formatter returning the <a> tag I would like to return the contents of a <component>. I have tried this but haven't been able to render a component.

I'm almost sure this is impossible because the child component is not previously binded which means the component won't be "reactive".

As an alternative I can build a js function that generates all the required links.

Another phrasing for this question would be: Is there any possibility to generate a vue component from vanilla js?

Answer 1

The above was not possible the way was tried because the components cannot be simply rendered like html tags as they can have methods and computed data therefore they must be compiled.

It looks like the solution for the above situation is using the Vue.compile() method:

const template = `
<ul>
  <li v-for="item in items">
   {{ item }}
  </li>
</ul>`;

const compiledTemplate = Vue.compile(template);

new Vue({
  el: '#app',
  data() {
    return {
      items: ['Item1', 'Item2']
    }
  },
  render(createElement) {
    return compiledTemplate.render.call(this, createElement);
  }
});

Demo: https://codepen.io/couellet/pen/ZZNXzy

Demo reference: https://snipcart.com/blog/vue-render-functions

Vue docs: https://v2.vuejs.org/v2/api/#Vue-compile