Rendering a simple component manually

Vue turns your HTML templates into render functions. Usually, you should stick to templates because they are much simpler. There are a couple of cases in which render functions become in handy. Here, we show a simple example in which render functions are useful.

Getting ready

This is the first recipe on render functions. If you already understand the basics of Vue, you will understand everything.

 

How to do it...

The first use case for render functions is whenever you just want a Vue instance that displays another component.

Write an empty HTML layout, as follows:

 <div id="app"></div>

We have a Greeter component somewhere that we want to show as the main Vue instance. In the JavaScript part, add the following code:

const Greeter = {
  template: '<p>Hello World</p>'
}

Here, we have to imagine that we are taking the Greeter component from somewhere else and, since the component is nicely packaged, we don't want to modify it. Instead, we...