Vue ドキュメントの render 関数を使用してビューを生成する方法の概要

Vue.component('my-table', {
  render: function(createElement) {
    return createElement('table', [
      createElement('tr', [
        createElement('th', 'First Name'),
        createElement('th', 'Last Name')
      ]),
      createElement('tr', [
        createElement('td', 'John'),
        createElement('td', 'Doe')
      ]),
      createElement('tr', [
        createElement('td', 'Jane'),
        createElement('td', 'Doe')
      ])
    ]);
  }
});

new Vue({
  el: '#app'
});

<div id="app">
  <my-table></my-table>
</div>

Vue.component('dialog', {
  props: ['title', 'visible', 'onClose'],
  render: function(createElement) {
    var self = this;
    var closeButton = createElement('button', {
      on: {
        click: function() {
          self.onClose();
        }
      }
    }, 'Close');
    var dialog = createElement('div', {
      style: {
        display: self.visible ? 'block' : 'none',
        padding: '10px',
        border: '1px solid #ccc',
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 9999,
        backgroundColor: 'rgba(0, 0, 0, 0.5)'
      }
    }, [
      createElement('h2', self.title),
      self.$slots.default,
      closeButton
    ]);
    return dialog;
  }
});

new Vue({
  el: '#app',
  data: {
    showDialog: false
  },
  methods: {
    closeDialog: function() {
      this.showDialog = false;
    }
  }
});

<div id="app">
  <button v-on:click="showDialog = true">Show Dialog</button>
  <dialog v-bind:title="'My Dialog'" v-bind:visible="showDialog" v-bind:onClose="closeDialog">
    <p>This is the content of my dialog.</p>
  </dialog>
</div>