When I should use render: h => h(App)?

Question

By the docs I do not fully understand when I should use render: h => h(App) function.

For example I have very simple Vue app:

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    components: { App }
})

What is the case when I need add to code: render: h => h(App)?

Answer 1

In the example you posted, App.vue represents the main app wrapper - all related .vue component files would be imported there.

So in your Vue instance you defined the components object, and added the App component, but how would you exactly mount that component to the instance and display it?

A couple of things to keep in mind:

• This is not a .vue file, so you don't have a template tag option. This is a pure .js file
• You can't put <App></App> into the template property because you are using runtime only build so the template option is not available

One option is using render functions. It's what Vue.js does under the hood. It takes your template and then template compiler converts it to render functions.

Alternatively, instead of a render function, you can the use spread operator:

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    ...App
})

From the docs:

Vue recommends using templates to build your HTML in the vast majority of cases. There are situations however, where you really need the full programmatic power of JavaScript. That’s where you can use the render function