Vue.js component render function examples

One of the many ways to define a components template within Vue.js is by using the render function.

This requires you to define the template as a javascript object, and therefor gives you full control of everything. The downside is that the templates soon become very verbose and hard to read. But once you get the hang of things they can be quite easy to understand and become realy powerful.

Let’s take a look at how to use it.

createElement function basics

Here is a basic outline of the arguments the createElement function accepts and how to use them.

This would output the following:

Basic template

Let’s now look at how to render a very basic template.

JS

HTML

Output

Multiple nodes

Now let’s make it a bit more complex and add in multiple child nodes.

JS

HTML

Output

Passing props

We can then pass data to the component via a prop and use that within the template.