Vue.js Load Component

August 24, 2018
render/createElement with h/hyperscript

Load Component

In earlier vuejs-templates sample, component loading is usually done in the following manner.

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

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App />',
  components: { App }
})

Later code use the following sample

new Vue({
  render: h => h(App),
}).$mount('#app');

Both sample code do the same, but the newer sample didn’t need /* eslint-disable no-new */ (if linting is enabled) and use shorter code.

NOTE: h is supposed to be some JSX syntax which is equivalent to render/createElement.

Load Component with Props/Parameter

Standard declaration.

const name = 'Hello World'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  data: {
    name: name
  },
  template: '<App :name="name" />',
  components: { App }
})

Load Component with parameter using h render function.

const name = 'Hello World'

new Vue({
  render: h => h(App, {
    props: {
      name: name
    }
  }),
}).$mount('#app');

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.