Sometimes, we want to load external templates in Vue.js components.
In this article, we’ll look at how to load external templates in Vue.js components.
How to load external templates in Vue.js components?
To load external templates in Vue.js components, we can use the httpVueLoader in Vue 2 and Vue.defineAsyncComponent method in Vue 3.
For instance, we write
new Vue({
components: {
"my-component": httpVueLoader("MyComponent.vue"),
},
});
to register the my-component component by calling httpVueLoader with the Vue component path in Vue 2.
And in Vue 3, we write
Vue.createApp({
components: {
"my-component": Vue.defineAsyncComponent(() =>
loadModule("./MyComponent.vue", opts)
),
},
});
to register my-component by assigning it to the component object that’s returned with Vue.defineAsyncComponent.
Conclusion
To load external templates in Vue.js components, we can use the httpVueLoader in Vue 2 and Vue.defineAsyncComponent method in Vue 3.
