Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Advanced Vue.js - Directives, Plugins, and Render Functions Chapter 17

In theory, you can write the component inline, inside the h function. In a

real project, this is not always possible depending on the presence of the

Vue template compiler at runtime. When you use the official Webpack

template, one of the questions you are asked is whether you want to

include the Vue template compiler when distributing your software.

The arguments for the createElement function are listed here:

1. As the first argument, the only required one, you have the option to pass three
   different things:
   The options of a Vue component, like in our recipe
   A string representing an HTML tag (such as div, h1, and p)
   A function that returns an options object for a Vue component or a
   string representing an HTML tag


2. The second argument must be an object called Data Object. This object is
   explained in the next recipe.


3. The third argument is an array or a string:
   The array represents a list of elements, text, or components to put
   inside the component
   You can write a string that will be rendered to text

Rendering a component with children

In this recipe, you will build a simple web page with a few elements and components
completely using render functions. This will give you a close-up view of how Vue compiles

your templates and components. It may be useful if you want to build an advanced
component and you want a full example to kick start.

Getting ready

This is a complete recipe on how to build components through render functions. Usually,

you don't need to do this in practice; it's recommended only for advanced readers.