Vue Render Function

An example of how to implement a Vue render function manually.

by Steve

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.runtime.js"></script>
<div id="app">

</div>

CSS

.message {
  font-weight: bold;
  font-size: 1.5em;
  margin-top:20px;
}

JavaScript

Vue.component('msg', {
  functional: true,
  render: (createElement, context) => {
    return createElement('div', {
      attrs: {
        class: "message"
      }
    }, [context.props.message])
  },
  props: ['message']
})

new Vue({
  render: function(createElement) {
    return createElement(
      'div', {}, [
        createElement(
          'button', {
            on: {
              click: (e) => {
                this.updateMsg()
              }
            }
          }, ['Greet!']),
        createElement(
          'msg', {
            props: {
              message: this.msg
            }
          }),
	        createElement('marquee', {}, ['neato'])
      ])
  },
  methods: {
    updateMsg() {
      this.msg = "Hello World"
    }
  },
  data: {
    msg: ""
  }
}).$mount("#app")