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: