Vue.js Load Component

Aug 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),

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');


❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.